Vue中的自定义指令

你的名字 2021-07-25 17:29 475阅读 0赞

**目录**

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

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

--------------------

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

自定义指令：除了内置指令，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>

![20190915203047501.gif][]

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

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

具体描述见官网API：[点击我进入][Link 1]

*  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 />
    			
    		</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>

![20190916130706925.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

自定义指令的简写；

局部自定义指令；

<!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>

![20190916131930434.gif][]![20190916132020382.png][]

[20190915203047501.gif]: /images/20210725/606bdfe1e32a4b9485fdb700106224f7.png
[Link 1]: https://cn.vuejs.org/v2/guide/custom-directive.html
[20190916130706925.png]: https://img-blog.csdnimg.cn/20190916130706925.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/350daeb3fb5f42b59a11f42a6d30ea92.png
[20190916131930434.gif]: https://img-blog.csdnimg.cn/20190916131930434.gif
[20190916132020382.png]: /images/20210725/42f75ae956f843a5a8d9a3b89a7523ee.png