Vue笔记：自定义指令

自定义指令

作用

• 操作底层dom

例子
使用

注意传参时的格式
创建

• 当组件被创建直接自动传入了一个el参数，el就是使用这个指令的dom
• 谁用这个指令，谁的背景变成红色
• 传过来的参数在bind.value里

局部自定义指令

• 局部自定义指令不用Vue.,而是接收了一个directives

使用

创建

指令生命周期

指令和组件是两套东西

bind() {
    
     //... }

• 当指令绑定到 HTML 元素上时触发
• 只调用一次

inserted(){
    
     //... }

• 只执行一次
• 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update(){
    
     //... }

• 第一次是紧跟在 bind
  之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新

componentUpdated(){
    
     //... }

• 指令所在的组件的VNode以及其子VNode 全部更新后调用.

unbind(){
    
     //... }

• 只调用一次， 指令与元素解绑时调用。

参数

el

• dom元素本身

binding

name

• 指令名，不包含v-的前缀

value

• 指令的绑定值；例如：v-my-directive=“1+1”，value的值是2；

oldValue

• 指令绑定的前一个值
• 仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；

expression

• 绑定值的字符串形式
• 例如：v-my-directive=“1+1”，expression的值是’1+1’；

 arg

• 传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；

modifiers

• 一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}

vnode

• Vue编译的生成虚拟节点

oldVnode

• 上一次的虚拟节点
• 仅在update和componentUpdated钩子函数中可用