Vue注意点、技巧点

1. 技巧点

1.1 字符串拼接的高级方式，ES6

使用tab上面的反引号加上${表达式}，如：

`拼接${comment.name}？`

2. js的方法

2.1 从数组头部插入数据 unshift

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

fruits 将输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango

2.2 添加或删除数组一个/多个元素 splice

用法：array.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

返回值

Type	描述
Array	如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

// 1. 数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");

fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango

//2. 移除数组的第三个元素，并在数组第三个位置添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Mango

注意：这种方法会改变原始数组。

2.3 reduce 数组方法

2.4 map数组方法

3. 注意点

报错代码：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain
 them instead.

原因:在一个组件的template中，只能存在一个根节点。所以当出现标签同级时，需要在外部使用div包裹，作为唯一根节点。

4. 路由跳转、渲染出问题

export default new VueRouter({
  // 配置 n 个路由 ,该项是 routes，不是routers注意
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})

5. 使用vue-router时。

会给vm对象添加两个属性.

5.1 route 当前路由，可以用来获取当前参数(params/query->post/get)以及当前的路径.可以使用监听尽心该路由监控，从而判断当前路由是否发生改变。

5.2 router 当前路由器，可以进行路径的跳转，push，replace的区别，一个可以回到当前路径，一个是替换当前路径。

6. 伪数组转为真数组

需求：获取到的节点数组是一个伪数组，伪数组只有length的方法。如果需要使用forEach进行遍历则需要转化为真数组
解决方式：

const lis = document.getElementsByTagName('li') // lis是伪数组(是一个特别的对象,只有 length和数值下标属性)
console.log(lis instanceof Object, lis instanceof Array)  true  false
const lis2 = Array.prototype.slice.call(lis)  // lis.slice()
console.log(lis2 instanceof Object, lis2 instanceof Array)   true  true 可以调用forEach方法
var newArr = [].slice.call($('.el-pager')[0].children)
                    newArr.forEach((e) => {
                        $(e).removeClass('active')
                    })