Vue中的自定义指令

最新推荐文章于 2024-05-16 12:01:06 发布

疆~

最新推荐文章于 2024-05-16 12:01:06 发布

阅读量308

点赞数

分类专栏： Vue2 文章标签： Vue

本文链接：https://blog.csdn.net/qq_40323256/article/details/100857393

版权

Vue2 专栏收录该内容

196 篇文章 59 订阅

订阅专栏

一，自定义指令-钩子函数

二，自定义指令-钩子函数参数

一，自定义指令-钩子函数

自定义指令：除了内置指令，Vue也允许用户自定义指令；

注册指令：通过全局API Vue.directive可以注册自定义指令；

自定义指令的钩子函数：

bind；
inserted；
update；
componentUpdated；
unbind；

自定义指令的使用：在自定指令的名称前加上 v-；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>09_Custom_Directive</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<input type="text" v-model="name" /><br />
			name : <span v-demo ref='name'>{{name}}</span><br />
			msg : <span v-if="flag">HelloVue</span><br />
			<button @click="flag = !flag">解除绑定</button><br />
		</div>
	</body>
	
	<script>
		
		Vue.directive('demo', {
			//指令的钩子函数
			bind(){
				alert("bind 首次绑定到元素时候执行，它只执行一次，常用于初始化操作");
			},
			inserted(){
				alert("inserted 插入到父节点之后，也就是DOM对象");
			},
			unbind(){
				alert("unbind 解除绑定");
			},
			update(){
				alert("update 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时调用" + " name = " + vm.$refs.name.textContent);
			},
			componentUpdated(){
				alert("componentUpdated 更新后调用" + " name = " + vm.$refs.name.textContent);
			}
		});
		
		let vm = new Vue({
			data : {
				name : 'Joey',
				flag : true
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

二，自定义指令-钩子函数参数

自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode；

具体描述见官网API：点击我进入

el：获取DOM对象；
binding：一个包含很多属性的对象；
vnode：Vue编译生成的虚拟节点；
oldVnode：上一个虚拟节点；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>10_Custom_Directive_01</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<input type="text" v-model="name" /><br />
			name : <span v-demo='name' ref='name'>{{name}}</span><br />
			<!--<button v-on:click="flag = !flag">解除绑定</button><br />-->
		</div>
	</body>
	
	<script>
		
		Vue.directive('demo', {	
			//指令的钩子函数
			bind(el, binding){
				console.log(el);
				el.style.color =  'red';
				console.log(binding);
				console.log(binding.name);
				console.log(binding.value);
				
				if(binding.arg === 'click'){
					console.log("执行点击事件");
				}
				
			},
			update(el, binding){
				console.log("update value = " + binding.value);
				console.log("update oldvalue = " +binding.oldValue);
			}
		});
		
		let vm = new Vue({
			data : {
				name : 'lijiang',
				flag : true
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

自定义指令的简写；

局部自定义指令；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>11_Custom_Directive_02</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<input type="text" v-model="name" v-focus/><br />
			name : <span v-font_style:red>{{name}}</span><br />
		</div>
	</body>
	
	<script>
		
		Vue.directive('demo', function(){
			alert(1);
		});
		
		let vm = new Vue({
			data : {
				name : 'Joey'
			},
			directives : {
				font_style : function(el, binding){
					el.style.color = binding.arg;
					console.log(binding);
				},
				focus : {
					inserted(el){
						el.focus();
					}
				}
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

疆~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的自定义指令

目录一，自定义指令-钩子函数二，自定义指令-钩子函数参数一，自定义指令-钩子函数自定义指令：除了内置指令，Vue也允许用户自定义指令；注册指令：通过全局API Vue.directive可以注册自定义指令；自定义指令的钩子函数：bind； inserted； update； componentUpdated； unbind；自定义指令的使用：在自定指令的...
复制链接

扫一扫

专栏目录