自定义对象
Vue官方文档：自定义指令 — Vue.js
(1) 注册全局指令：
1 2 3 4 5 6 7 | Vue.directive(“自定义指令名称”，{ Inserted (el,binding) { //el表示使用此指令的DOM元素，binding可获取此指令的绑定值} ) |
(2)注册局部指令：
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
标签:
常见自定义指令
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
2019-03-28 vue 对列表数组删除和增加