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

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('图片上传失败');
              }
          });
      }