前端框架Vue.js开发总结

一、前言

Vue是一个轻量化的可以快速出活的前端框架，Vue可以让后端开发人员迅速搭建出一个能够满足绝大部分要求的前端工程，Vue让前端入门变得更简单。

二、常用知识点

1. 数据双向绑定 -表格绑定的数组的内容已经发生变化了，但是表格却没有更新；
   原因：由于JS的限制，Vue不能检测出对象属性的添加或删除，所以，不能使用直接赋值的方式对数组（对象）进行修改等操作。
   正确使用方式：
   1.1.修改数组items第index+1个元素值： Vue.set(items, index, value);
   1.2.删除数组items第index+1个元素值： Vue.splice(index, 1);

2. Math.ceil用法，“天花板”，取大于当前数的最小整数：Math.ceil(11.45) = 12；Math.ceil(-11.4) = -11;

3. 对象类型，JS如何判断一个变量（数组，对象）的类型：数组还是对象？解：

function isArrayfun(value) {
   if (typeof Array.isArray === 'function') {
   	  return Array.isArray(value);
   } else {
         return Object.prototype.toString.call(value) === '[object Array]';
  }
}

var foo = 'bar';

4.判断一个变量是否为空？
解析：变量可能是数组，可能是对象，可能是字符串，可能是null，可能是undefined，可能是空字符串…需要针对性的进行判断；
参考方式：
4.1 数组
array.length === 0 ;
4.2 对象
a. 将对象转化为字符串，然后objectStr === ‘{}’ ;
b. for(var key in obj) {
return false;
}
4.3 字符串
使用正则表达式：testStr.match(/¹*$/)；

5. JSON字符串转为XML字符串

let jsonObj = {
  properties: {
      _id: 21213,
      _value: "hello"
 }
},
var x2js = new X2JS();
var xmlAsStr = x2js.json2xml_str(jsonObj);
var jsonObject = x2js.xml2js(xmlAsStr); // xml 转为json
}

这里有个地方容易出错，xml转为json时，如果结果只有一个元素，则解析结果为对象，否则为数组。
6. 字符串转大小写
str.toUpperCase(); str.toLowerCase();
7. 定时器
7.1 声明一个timer变量；
7.2 定时器初始化：this.timer = setInterval(() =>{ 业务逻辑}, 2000)
7.3 组件销毁前清除定时器：clearInterval(this.timer)
8. 在

三、遇到的坑

1. 双向绑定 -表格绑定的数组的内容已经发生变化了，但是表格却没有更新；
   原因：由于JS的限制，Vue不能检测出对象属性的添加或删除，所以，不能使用直接赋值的方式对数组（对象）进行修改等操作。
   正确使用方式：
   1）.修改数组items第index+1个元素值： Vue.set(items, index, value);
   2）.删除数组items第index+1个元素值： Vue.splice(index, 1);

2. Duplicate keys detected: ‘1’. This may cause a update error.；
   原因：vue组件中的HTML有key值相同的元素；
   解决：修改key值。

---

1. ↩︎