vue的十种常用指令详解

1. v-if 

---

功能：根据表达式的不同值。切换元素/组件的销毁和重建。

2. v-show

---

功能：根据表达式的不同值，切换元素的显示或者隐藏。

注意点：v-if 和 v-show的不同

1. v-if 是真正的销毁和重建组件，而v-show只是通过display的值来切换显示。

2. v-if是惰性的，初始条件为空就不旋绕，而v-show总是渲染。

3. v-show更适合条件改变频繁时的切换。

3. v-for

---

功能：循环指令，循环一个数组（对象）渲染一个列表。

注意点：需要配合key值使用。

4. v-html

---

功能：更改元素的 innerHTML。

5. v-model

---

功能：用于表单数据的双向数据绑定。

注意点：当type=file时，input的值不能使用v-model进行绑定。

6. v-bind

---

功能：父组件向子组件传递数据（props)，或绑定变量使用。

语法：v-bind:href = url，可简写为:href = url

7. v-on

---

功能：用于监听和绑定事件。

语法：v-on : click = getUrl，可简写为@click = getUrl

8. v-pre

---

功能：跳过该元素及其子元素的编译过程。

好处：跳过大量没有指令的节点会加快编译。

9. v-once

---

功能：只渲染元素/组件一次。

好处：重新渲染时，元素/组件及其所有的子节点将被视为静态内容并跳过，用于优化更新性能。

10. v-cloak

---

功能：元素编译中，显示。编译完成，隐藏。

用处：首页加载时，白屏的优化。