Vue.js指令大全

Vue.js指令大全教程

Vue.js 指令 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

Vue 为我们提供了13 个指令,这些 Vue 指令包括:

  • v-text
  • v-html
  • v-show
  • v-if
  • v-else
  • v-else-if
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-pre
  • v-cloak
  • v-once

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 事件,以便执行一些代码块。表达式可以是一个方法名。