Vue-自定义指令
注册指令
- 全局指令作用于多个VUE实例
1
2
3
4
5
6
7Vue.directive('指令名称',{
// el代表使用了此指令的dom元素
// binding可以获取使用了此指令的绑定值
inserted: function (el, binding) {
// 逻辑代码
}
}) - 局部指令仅作用于当前VUE实例注意: 注册是不可以添加v-,
1
2
3
4
5
6
7directives:{
'指令':{
inserted: function (el, binding) {
// 逻辑代码
}
}
} - 使用指令
- 引用指令是前面要添加v-
- 直接在元素上使用即可
举例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<body>
<div id="app01">
<p v-upper-text="message">xx</p>
获取交点<input type="text" v-focus>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.directive('upper-text',{
bind: function(el){
el.style.color = 'red'
},
// el表示dom元素本身,binding表示Vue绑定的值(value),表达式(expression)
//
inserted: function (el,binding) {
// 文本内容修改大写
el.innerHTML = binding.value.toUpperCase()
}
})
var vm = new Vue({
el: '#app01',
data:{
message: 'hello world!!'
},
// 局部自定义指令
directives:{
'focus':{// 指令名称
// 刷新页面自动获取焦点
inserted: function (el) {
el.focus()
}
}
}
})
</script>
</body>
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com
文章标题:Vue-自定义指令
文章字数:291
本文作者:Aaron
发布时间:2019-12-04, 23:30:25
最后更新:2019-12-05, 23:36:28
原始链接:http://blog.linuxerbulo.com/2019/12/04/Vue-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。