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
功能：元素编译中，显示。编译完成，隐藏。
用处：首页加载时，白屏的优化。
网友评论