除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。 v-xxx
html+css的复用的主要形式是组件
你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令
局部注册和使用
//1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v- 指令名
注意:
// bind 操作样式,不要写js
// inserted 可以操作样式,也可以操作dom的行为的js
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
全局注册
在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令
// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
inserted(el) {
el.focus() // 触发标签的事件方法
}
})
自定义指令-传值
总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作