之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div>
<input type="text" v-focus v-color="'blue'" /></div><script>Vue.directive('focus', {//当指令绑定到元素上时,会执行bind,并且只执行一次//el参数,是指绑定这个指令的元素,并且是一个原生JS的对象,可以直接调用原生的JS方法 bind: function (el) {//在bind函数里想令元素获取焦点是不可行的,因为此时元素还没有插入DOM,不会报错,但是也无效//el.focus();//但是像这样的操作就没问题啦el.innerHTML = "DIV上来就有内容!";},//元素插入到DOM时,执行inserted函数//所以这里调用focus时,才会令元素获取焦点 inserted: function (el) {el.focus();el.value = "文本框初始化";}})//使用参数Vue.directive('color', {bind: function (el, binding) {el.style.color = binding.value;}})var v = new Vue({el: '#divApp',data: {},methods: {},
directives: {//私有自定义指令
color: {
bind: function (el, binding) {
el.style.color = 'red';
}
}
}
})</script>
1. 使用参数时,需要注意写法是v-color="'blue'" ,而不是v-color="blue",因为如果里面没有单引号,Vue会当作自己的属性或者方法等,在实例中查找,而不是当做传递的参数。
2. Vue.directive定义的是公共的自定义指令,任何元素都可以调用,而在Vue实例中定义的自定义指令,是私有的,只有在指定的元素才能调用,写法和公共的基本一样,另外当私有和公共的指令同名时,按就近原则,先找私有,没有再找公共,定义私有时
3. 钩子函数的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.foo.bar
, 修饰符对象 modifiers 的值是{ foo: true, bar: true }
。
4. 当只需要bind钩子函数时,可以简写成
color: function (el, binding) {el.style.color = 'red';}
全局指令也可以简写。
上一篇:
Vue.js 学习笔记 十 自定义按键事件
下一篇
Vue.js 学习笔记 十二 Vue发起Ajax请求