vue 自定义指令
VUE 中自定义指令
可全局定义也可局部定义
全局定义方法,
项目src目录下新建一个directive.js,
然后导入VUE,类似下面
import Vue from 'vue' const vueDirective = { bgcolor:{ bind: function(el,binding){ el.style.backgroud = binding.arg; } }, .............(这里还可以写很多,写完后下面统一注册) } Object.keys(vueDirective).forEach(k=>Vue.directive(k,vueDirctive[k]))
也可局部注册
directives:{ bgcolor:{ bind: function(el,binding){ el.style.background = binding.arg; } } } 在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写: directives:{ bgcolor:function(el,binding){ el.style.background = binding.arg; } }
//使用
//传参的形式
<div v-bgcolor:#333333></div>
binding.value ==>#333333
//传值的形式,传的值写在data里
<div v-bgcolor:#333333="values"></div>
binding.arg ==> values
//注释
el
:指令所绑定的元素,可以用来直接操作 DOM 。binding
:一个对象,包含以下属性:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。