vue学习笔记11-自定义指令
除了默认设置的核心指令( 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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读