Vue指令的详细介绍

今天给朋友们介绍Vue指令的用处：

1. v-bind     - -     可简写为 : 动态绑定属性值的时候使用
2. v-on     - -     可简写为 @ 添加事件监听的时候使用
3. v-model     - -     与数据实时关联，一般用于input，textarea
4. v-text     - -     设置文本内容
5. v-html     - -     设置html文本
6. v-pre     - -     保留格式
7. v-clock     - -     一般与[v-cloak] { display: none }一起用，在数据未渲染时隐藏数据
8. v-if     - -     用作判断元素是否显示
9. v-else     - -     与v-if配对使用（与JS当中的if else 一样）
10. v-else-if     - -     同上
11. v-for     - -     循环遍历某数组，数组多长就遍历多少次添加多少次的DOM
12. v-show     - -     用作显示隐藏元素
13. v-slot     - -     插槽
14. v-once     - -     只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-if与v-show都是用作于显示隐藏元素，那么它们有什么区别呢？

• v-if是创建和移除DOM
• v-show是修改DOM的display的属性值
• v-if一般用作于少次数的显示隐藏DOM，因为它的切换开销比较大。
• v-show一般用作于频繁的显示隐藏DOM，但是初始化的时候不建议使用，因为它的初始化开销比较大。

小总结：
只初始化一次的时候用v-if
要反复切换状态的时候用v-show