Vue.js 指令 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
Vue 为我们提供了13 个指令,这些 Vue 指令包括:
指令 | 说明 |
---|---|
v-text | vue v-text 指令主要用来更新 textContent,可以等同于 JS 的 text 属性。 |
v-html | 双大括号的方式会将数据解释为纯文本,而非 HTML。为了输出真正的 HTML,可以用 vue v-html 指令。它等同于 JS 的 innerHtml 属性。 |
v-pre | vue v-pre 指令主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的 Mustache 标签。跳过大量没有指令的节点加快编译。 |
v-cloak | vue v-cloak 指令是用来保持在元素上直到关联实例结束时进行编译。 |
v-once | vue v-once 指令关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。 |
v-if | vue v-if 指令可以实现条件渲染,Vue 会根据表达式的值的真假条件来渲染元素。 |
v-else | vue v-else 指令是搭配 v-if 使用的,它必须紧跟在 v-if 或者 v-else-if 后面,否则不起作用。 |
v-else-if | vue v-else-if 指令充当 v-if 的 else-if 块,可以链式的使用多次。可以更加方便的实现 switch 语句。 |
v-show | vue v-show 指令也是用于根据条件展示元素。 |
v-for | vue v-for 指令根据遍历数组来进行渲染。 |
v-bind | vue v-bind 指令用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定 class 和 style,以及 href 等。 |
v-model | vue v-model 指令用于在表单上创建双向数据绑定。 |
v-on | vue v-on 指令主要用来监听 dom 事件,以便执行一些代码块。表达式可以是一个方法名。 |