15-Vue自定义指令

Vue自定义指令

  • Vue除了提供自身的指令(v-model，v-bind等)外, Vue 也允许注册自定义指令。
  • 通过 Vue.directive 命令，可以注册一个全局指令。例如 v-focus, 该指令的功能是在页面加载时，元素获得焦点。
  • 我们也可以在 Vue 实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用。
  • 常用钩子函数（其他请参照官网）
    • bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • 常用钩子函数参数
    • el: 指令所绑定的元素，可以用来直接操作 DOM
    • binding: 一个对象，接受参数。包含以下 property：
      • name：指令名，不包括 v- 前缀。
      • value：指令的绑定值，例如：v-wordcolor="'red'" 中，绑定值为 'red'
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
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue自定义指令</title>
	</head>
	<body>
		<div id="app">
			<!-- 自动获取焦点 v-focus -->
			<input type="text" v-focus><br><br>
			<!-- 禁止文本输入 v-disable -->
			<input type="text" v-disable><br><br>
			<!-- 设定文字颜色 v-wordcolor -->
			<input type="text" v-wordcolor="'red'"><br><br>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		//定义一个全局自定义指令 v-focus
		Vue.directive('focus', {
			//当被绑定对象插入到DOM时，调用
			inserted: function(el) {
				//el参数为一个原生javascript对象
				el.focus()
			}
		})
		//定义一个全局自定义指令 v-wordcolor
		Vue.directive('wordcolor', {
			bind: function(el, bind) {
				el.style.color = bind.value
			}
		})
		var vm = new Vue({
			el: "#app",
			data: {},
			//定义一个局部自定义指令 v-disable
			directives: {
				disable: {
					inserted(el) {
						el.disabled = true
					}
				}
			}
		})
	</script>
</html>

浏览器中的显示结果

PS：如有任何问题，欢迎在下面评论区留言，让我们共同进步，非常感谢！（^o^）v

web前端开发 > Vue
#JavaScript #web前端 #Vue
15-Vue自定义指令
https://liaoliaocode.xyz/article/6478/
作者
Brian.Gao
发布于
2022年4月19日
许可协议