之前看到过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请求
