除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 注册指令的关键字是directive, 同样也有局部和全局之分,区别方式和组件相同。 全局:
<div id="app">
<input type="text" v-focus />
</div>
Vue.directive('focus',{
inserted : function(el){
el.focus();
}
})
局部:
new Vue({
el : '#app',
directives : {
focus : {
inserted : function(el){
el.focus();
}
}
}
});
注意:局部中使用的是directives ,全局中使用的是directive。
运行后发现页面刚打开的时候文本框被选中了,说明自定义指令成功了。 而在自定义指令的设置中有两个不明点。 一个是inserted,一个是function中传入的el 这两个分别对应着钩子中的钩子函数和钩子函数参数。 inserted是钩子函数,除了它之外还有其他几种
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
————菜鸟教程
el则是钩子函数的参数 用来直接操作 DOM 详情:http://www.runoob.com/vue2/vue-custom-directive.html