开发中遇到的一些问题汇总

1: vue中,想完成一个超过20个字,显示...,点击之后再全部展开的功能。因为是列表,每一个具有不同的index,所以选用的是使用数组来实现其显示还是隐藏,但是当改变具体的某个数组的状态时,发现并没有触发上面的变化。
原因:对vue如何进行渲染等,对vue内部的实现一点都不了解。归结起来就是vue没有监测到数据的变化。
Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。
一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。
模板中每个指令/数据绑定都有一个对应的 watcher 对象,在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时,会触发 watcher 重新计算 ,也就会导致它的关联指令更新 DOM。
Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
不过,有办法在实例创建之后添加属性并且让它是响应的。
对于 Vue 实例,可以使用 $set(key, value) 实例方法:

  vm.$set('b', 2)
  // `vm.b` 和 `data.b` 现在是响应的

对于vue是如何渲染的,如何工作的,之后需要努力的补一下。

2: 还有对于vue中,v-if的使用也需要好好的看一下,因为在使用v-if时,对于其它的加载也貌似有问题,比如在v-if的判断中,不能正常触发日期的组件,不知道为什么。使用v-show就没有问题。
3: 在使用上传图片的功能时,出现了总是服务器内部错误,因为使用nginx服务器没有开启权限,所以nginx并没有向外转发。

  • 如何查看nginx的日志文件:
    1: ps aux | grep nginx //查看nginx的进程号吗?
    2: lsof -p 5496 | grep log //5496是进程号,查看log文件的位置
    3: 查找到log文件的位置就可以查看日志文件了。
    4: sudo chmod -R 777 client_body_temp/ //这样就修改为有权限进行上传文件

  • 如何编写上传文件?

    <div class="am-g">
            <label class="am-form-label am-u-sm-2">图片</label>
            <div class="am-form-file">
                <button type="button" class="am-btn am-btn-default am-btn-sm">
                    <i class="am-icon-cloud-upload"></i> 选择要上传的图片</button>
                <input type="file" accept="image/jpg,image/jpeg,image/png" v-on:change="previewImage($event)"/>
                <div><img width=50% v-bind:src.sync="posterUrl" /></div>
            </div>
        </div>
    
    previewImage: function(e) {
            var imageInput = e.target;
            var file = imageInput.files[0];
            var fReader = new FileReader();
    
            var self = this;
    
            var formData = new FormData();
            formData.append('file', file);
    
            uploadImage(formData).then(res => {
                console.log(res);
                var data = res.data.data;
                if (res.data['result_code'] === '0') {
                    this.posterUrl = data.cdnPath + data.urlName;
                    this.sysmessageinfo.posturl = data.urlName;
                } else {
                    alert(res.data['result_msg']);
                }
            }, fail => {
                if (fail.status == 413) {
                    alert('图片文件过大,请重新上传!');
                } else {
                    alert('图片上传失败');
                }
            });
        }
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容