内置指令:v-html,v-if,v-bind,v-on...可以在vue中直接使用
自定义指令:Vue支持开发者自己注册一些指令,这些指令被称为自定义指令
自定义指令作用
自定义指令可以封装DOM操作,同时可以扩展一些额外功能
自定义指令注册语法
两种注册方式:全局注册、局部注册
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
钩子函数:inserted:被绑定的元素插入父节点时调用
el:指向使用指令的DOM元素
使用步骤
1、注册(全局注册或局部注册)在inserted钩子函数中配置DOM逻辑
2、v-指令名,进行使用