指令 当表达式的值改变时,将其产生的影响,反馈到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
钩子中可用