Vue 入门 --- 指令

[felix-cao]

在 Vue 中，指令 (Directives) 是模板语法的重要特性，是带有 v- 前缀的特殊属性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 指令 --- 官网Doc

数据绑定最常见的形式就是使用 Mustache 语法 (双大括号) 的文本插值

Vue 内置(build-in)了 13 个指令

指令	作用	示例
v-text	更新textContent	<span v-text="msg"></span>
v-html	双大括号的方式会将数据解释为纯文本而非 HTML。为了输出真正的HTML，可以用 v-html指令。它等同于JS的innerHtml属性。	<div v-html="rawHtml"></div>
v-show	元素会始终被渲染并保存在dom中，它只是 简单的切换css的dispaly属性。	<h1 v-show="isShow">Felix</h1>
v-if	Vue会根据v-if的值的真假来渲染元素。 如果为true，则显示。否则，不会渲染。	<a v-if="typ!=='ok'">Felix</a>
v-else	搭配v-if使用的，必须紧跟在v-if 或v-else-if后面，否则不起作用。
v-else-if	v-else-if充当v-if的else-if块，可以链 式的使用多次。更加方便的实现switch语句。
v-for	根据遍历数组来进行渲染
v-on	监听dom事件，表达式可以是一个方法名。 简写为@
v-bind	动态的绑定一或多个特性,简写为:, 常用 于动态绑定class和style及href等
v-model	用于双向数据绑定
v-pre	用来跳过元素及其子元素编译过程。 用来显示原始的Mustache标签。
v-cloak	用来保持在元素上至关联实例结束时进行编译。
v-once	关联的实例，只会渲染一次。之后的重新渲染， 实例极其所有的子节点将被视为静态内容跳过， 这可以用于优化更新性能。

备注

• v-if有更高的切换开销，v-show有更高的初始渲染开销。因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
• 当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

Reference

• Vue 指令API
• 指令 --- 官网Doc
• Vue 指令大全