自定义对象
Vue官方文档：自定义指令 — Vue.js
(1) 注册全局指令：
Vue.directive(“自定义指令名称”，{
Inserted (el,binding) {
//el表示使用此指令的DOM元素，binding可获取此指令的绑定值
} )
(2)注册局部指令：
new Vue({
directives: {
“自定义指令名”:{ //指令名不要带v-
Instered(el,binding) {
}
}
})
(3) 使用指令：引用指令时，指令前面加v-;直接在元素使用上，v-指令名 = “表达式”
<body>
<script src="./node_modules/vue/dist/vue.js"></script>
<div id="app">
<!-- v- 属于固定使用 -->
<!-- 自定义指令名称时最好使用添加-的形式，驼峰式命名在使用时也需要改为添加-的形式 -->
<p v-upper-text="message">xxxxx</p>
自动获取焦点:
<!-- 指令名称为focus 使用时加v- -->
<input type="text" v-focus>
</div>
<script>
// 注册全局自定义指令
// 在vue实例上注册vue自定义指令
// 第一个参数式指令名称，自定义的，第二个参数是对象,对象存在钩子函数，钩子函数自动调用
Vue.directive("upper-text",{
//自定义指令的钩子函数自动调用
// bind：只调用一次，指令第一次绑定到元素时调用
// 一般对样式的操作放到bind里面
bind (el, bindings,vnode){
// 输出时字体颜色变成黄色
el.style.color = "yellow"
},
// inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已经被插入文档中)
// 一般对JS的操作一般放到inserted钩子中
// binding钩子函数的参数，一个对象
inserted (el, binding, vnode){
console.log(binding, vnode.context); // 需要测试vnode.context里面的内容
// 转换成大写,输出时字母变成大写
el.innerHTML = binding.value.toUpperCase();
// el.innerHTML = binding.name.toUpperCase();
}
})
new Vue({
el:"#app",
data:{
message:'abc,测试数据',
},
// 注册局部的自定义指令
directives:{
"focus":{
inserted (el,binding){
el.focus()
}
}
}
})
</script>
</body>
下面是常见的自定义指令举例：
图片懒加载 v-lazy
防抖 v-debounce
按钮权限 v-has
拖拽指令 v-draggable /mousemove / mouseup / mousedown / dragenter /dragover /drop。 可视化拖拽编辑器
点击事件处理 v-click-outside
浙公网安备 33010602011771号