除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。 v-xxx
html+css的复用的主要形式是组件
你需要对普通 DOM 元素进A行底层操作,这时候就会用到自定义指令
App.vue内准备内容
<template>
<div>
<!-- <input type="text" v-gfocus> -->
<input type="text" v-focus>
</div>
</template>
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
data(){
return {
colorStr: 'red'
}
},
directives: {
focus: {
inserted(el){
el.focus()
}
}
}
}
</script>
<style>
</style>
这样 一个v-focus的自动获取焦点的指令 就完成了
focus 这个名字是不固定的 可以自己起名字
还有一点的就是 这个 指令的作用域只有当前组件 如果你想要全局都可以使用 那么需要全局注册
// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
inserted(el) {
el.focus() // 触发标签的事件方法
}
})
而是用自定义命令的时机 就是 在Vue内置指令满足不了需求时, 可以自己定义使用
这样 当打开页面的时候 就会触发 获取焦点效果