vue指令

v-bind

v-bind 主要用于动态绑定 DOM 元素属性(attribute)，即元素属性实际的值是由 vm 实例中的 data 属性提供的。

v-model

v-model 指令在第 2.2.3 小节中的表单控件中已经说明过了，这里就不再赘述了。该指 令主要用于 input、select、textarea 标签中，具有 lazy、number、debounce(2.0 废除)、 trim(2.0 新增)这些修饰符。v-if/v-else/v-show。

v-if/v-else/v-show

这三个指令主要用于根据条件展示对应的模板内容，这在第 2.3.2 小节的渲染语法中也进行了说明。v-if 和 v-show 的主要区别就在于，v-if 在条 件为 false 的情况下并不进行模板的编译，而 v-show 则会在模板编译好之后将元素隐藏 掉。v-if 的切换消耗要比 v-show 高，但初始条件为 false 的情况下，v-if 的初始渲染要 稍快。

v-for

v-for 也是用于模板渲染的指令。

v-bind:key

<div v-for="item in items" v-bind:key="item.id">。
v-for="n in 10"中的n由原来的0~9迭代变成1~10迭代。

v-on

v-on 指令主要用于事件绑定

<button v-on:click='onClick'></button>

v-on 可以简写为:

<button @click='onClick'></button>

v-text

v-text，参数类型为 String，作用是更新元素的 textContent。{{}} 文本插值本身也会 被编译成 textNode 的一个 v-text 指令。而与直接使用 {{}} 不同的是，v-text 需要绑定在某 个元素上，能避免未编译前的闪现问题。

v-HTML

v-HTML, 参数类型为 String，作用为更新元素的 innerHTML，接受的字符串不会进行 编译等操作，按普通 HTML 处理。同 v-text 类似，{{{}}} 插值也会编译为节点的 v-HTML 指令，v-HTML 也需要绑定在某个元素上且能避免编译前闪现问题。例如:

<div>{{{HTML}}}</div> <div v-HTML="HTML"></div>

v-el

v-el 指令为 DOM 元素注册了一个索引，使得我们可以直接访问 DOM 元素。语法上说， 可以通过所属实例的 $els 属性调用。例如:

v-ref

v-ref 指令与 v-el 类似，只不过 v-ref 作用于子组件上，实例可以通过 $refs 访问子组 件。命名方式也类似，想使用驼峰式命名的话用“-”来做连接。例如:

v-pre

v-pre 指令相对简单，就是跳过编译这个元素和子元素，显示原始的 {{}}Mustache 标 签，用来减少编译时间。例如:

<div v-pre>{{ uncompiled}}</div> var vm = new Vue({
el : '#app',
data: {

uncompiled : 'Thers is an uncompiled element' }
});

v-cloak

v-cloak 指令相当于在元素上添加了一个 [v-cloak] 的属性，直到关联的实例结束编译。 官方推荐可以和 css 规则 [v-cloak]{ display :none } 一起使用，可以隐藏未编译的 Mustache 标签直到实例准备完毕。例如:

<div v-cloak>{{ msg }}</div

v-once

v-once 指令是 Vue.js 2.0 中新增的内置指令，用于标明元素或组件只渲染一次，即使随 后发生绑定数据的变化或更新，该元素或组件及包含的子元素都不会再次被编译和渲染。这样 就相当于我们明确标注了这些元素不需要被更新，所以 v-once 的作用是最大程度地提升了更 新行为中页面的性能，可以略过一些明确不需要变化的步骤。使用方式如下:

<span v-once>{{msg}}</span>
<my-component v-once :msg='msg'></my-component>