vue基础教程学习（五）

这一节主要是总结一些在实际Vue的项目开发当中遇到的一些疑难问题，但是踩过这些坑之后就会豁然开朗，请君悉知。

一.运行代码后报如下的错误：Component template should contain exactly one root element. If you are using v-if on multiple elemen

我猜你的代码结构一定是这样的：

<temple>
    <scroller></scroller>
    <router-link></router-link>
</temple>

没错，你的问题所在就是少了包裹元素，正确的写法如下所示：

<temple>
    <div>
        <scroller></scroller>
        <router-link></router-link>
    </div>
</temple>

---

二.vue相关数组的操作
1.根据索引设置元素：
this.arr.$set(index,val)
2.合并数组：
this.arr = this.arr.concat(anotherArr)
3.清空数组：
this.arr = []
4.arr.shift() // 删除第一个元素，并返回第一个元素
5.arr.pop() // 删除最后一个元素，并返回最后一个元素
6.arr.unshift() // 数组开头添加一个或多个元素，并返回新数组的长度
7.arr.push() // 数组尾部添加一个或多个元素，并返回新元素的长度
8.arr.splice(i,n) // 从i个位置数组n个元素
注意：this.arr[index] = val 以及 this.arr.length = 2; 均无法触发视图更新

---

三.ES6循环数组的新方法for-of：
eg. for(var value of myArr){
console.log(value)
}

---

四.this.$nexttick()
vue.js通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触Dom
官方介绍：将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用它，然后等待DOM更新

this.$nexttick(() => {
    // dom元素更新后执行
})

---

五. ref
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的Dom对象上使用，引用指向的就是Dom元素；如果在子组件上，引用就指向组件实例
减少获取Dom节点的消耗
便于dom的操作

// vm.$ref.p  将是dom节点
<p ref="p">hello</p>
// vm.$ref.child  将是组件实例
<child-comp ref="child"></child-comp>

---