指令 当表达式的值改变时,将其产生的影响,反馈到DOM

内置指令  v-bind   v-on  v-model  v-show  v-if  v-else  v-else-if   v-text  v-html  v-for  v-cloak  v-once  v-pre

v-bind: 属性绑定  简写为 :value=""

v-on:事件绑定  简写为 @click = ""

v-model 数据双向绑定

v-show 条件渲染 操作DOM隐藏

v-if 条件渲染  删除DOM

v-text 元素展示textContent  例如:<span v-text="msg"></span> 等同于 < span>{{msg}} </ span>

v-html 元素展示innerHTML

v-for 循环

v-cloak 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题

v-once 定义它的元素或组件只会渲染一次,包括元素或者组件的所有字节点。首次渲染后,不再随着数据的改变而重新渲染。也就是说使用v-once,那么该块都将被视为静态内容。

v-pre 不解析要展示的东西,使用v-pre指令之后,输出纯文本值{{message}}

自定义指令

钩子函数:bind  inserted  update  componrntUpdate  unbind

bind:只调用一次,绑定元素

inserted:被绑定元素去插入父元素使用(父节点一定要存在,插入可以失败)

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componrntUpdate: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。

 

unbind:仅调用一次,解绑元素

 

钩子函数参数:el  binding  vnode  oldNode

el:指令绑定的元素,可直接操作DOM

binding:一个对象,包含(name  value  oldValue expression  arg  modefiers)

    name:指令名

    value:指令绑定的值

    oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    expression :指令表达式

    arg:传给指令的参数

    modefiers:一个包含修饰符的对象

vNode:Vue编译生成的虚拟节点

oldNode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用