Vue常用的内置指令

1，v-cloak
<div id = 'app' v-cloak> {{ message }} </div>
虽然已经加上了 v-cloak 但是当网速过慢时，还会显示message的字样，直到Vue创建实例、编译模板时，DOM才会被替代，过程回出现闪动，只要加上一句css就可以解决
[v-cloak] {
display: none
}
2, v-once
作用，定义它的元素只被渲染一次，不再随数据的变化重新渲染，将被视为静态内容
3，v-if, v-else-if, v-else
举个栗子：
<div>
<p v-if = "status === 1">当status = 1 时显示该行</p>
<p v-else-if = ""status === 2"> 当status = 2 时显示该行</p>
<p v-else> 否则都不显示</p>
</div>
4，v-show
v-show 与 display: none/block 时一样的作用，隐藏元素，而不时消除元素
注意： v-show不可以在 <template>上使用
5，v-for
举个栗子：
data:{
books: [
{
name: ' **** ',
author: 'HL'
},
{
name: ' **** ',
author: 'HL'
},
{
name: ' **** ',
author: 'HL'
}
]
}
<template v-for = 'book in books'>
<li>{{ book.name }}</li>
<li>{{ book.author }}</li>
</template>

同时，v-for 还有 value,key,index 的属性，在编程时可以灵活应用

注意： vue不能检测到也不会触发视图更新：
1，通过索引直接设置选项
2，修改数组的长度

第一个问题的解决方案：
Vue.set(app.books, 3,{
name: '$$$$',
author: 'HF'
})
另一种方法 使用代替的方法
app.books.splice(3, 1, {
name: '$$$$',
author: 'YX'
})
第二个问题的解决方案：
app.books.splice( 1 )

// 补充 ：
(1)    splice(x, y, z)
x: 替换目标的位置
y: 替换目标的个数
z: 将要替换的内容

(2)   Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
(3)  一个简洁的小技巧：
<button  :disabled = "item.count === 1">  </button>
当disabled满足条件时，button就会立即失效。
如果button 换成了 div ,
disabled就不会起作用了。

作者：是归人不是过客
链接：https://www.jianshu.com/p/50edf3c1062e