vue的自定义指令解析

男娘i 2021-09-19 14:34 406阅读 0赞

# 概念 #

指令只是一种可以附加到DOM元素的微命令(tiny commands)。它们通常以 “v-” 作为前缀，以方便 Vue 知道你在使用一种特殊的标记，从而确保语法的一致性。 如果你需要对 HTML 元素的低级别 ( low-level ) 访问来控制一些行为，它们通常很有用

# 钩子函数 #

*  **bind**  
        只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
 *  **inserted**  
        被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
 *  **update**  
        所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
 *  **componentUpdated**  
        指令所在组件的 VNode 及其子 VNode 全部更新后调用
 *  **unbind**  
        只调用一次，指令与元素解绑时调用

<body>
    <div id="app">
        <input type="text" v-test>
    </div>
    <script src="vue.js"></script>
    <script>
    	// 注册全局自定义指令
    	Vue.directive('test', { 
    		// 第一个钩子函数 bind 指令第一次绑定到元素上
            bind: function(el, binding) { 
              console.log('bind')      // bind
            },
            // 第二个钩子函数 inserted 指令所在的元素插入到父节点
            inserted: function(el, binding) { 
              console.log('inserted')    // inserted
            },
            // 第三个钩子函数 update 数据发生变化 
            update: function(el, binding) { 
              console.log('update')
            },
            // 第四个钩子函数 componentUpdated 更新完毕
            componentUpdated: function(el, binding) { 
              console.log('componentUpdated')
            },
            // 第五个钩子函数 unbind 解绑
            unbind: function(el, binding) { 
              console.log('unbind')
            }
    	})
    
    	new Vue({ 
            el: '#app'
    	})
    </script>
    </body>

# 参数 #

**1. el**  
      指令所绑定的元素，可以用来直接操作 DOM

**2. binding**  
      一个对象，包含以下属性：

`name： 指令名，不包括 v- 前缀`

`value： 指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2`

`oldValue： 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用`

`expression： 字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”`

`arg： 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”`

`modifiers： 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }`

**3. vnode**  
      Vue 编译生成的虚拟节点

**4. oldVnode**  
      上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

# 注意 #

*  除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行
 *  建议在给指令的命名时采用小驼峰式的命名方式，比如changeBackgroundColor，在使用的时候采用烤串式写法 v-change-background-color

<body>
    <div id="app">
    	<div class="txt" v-test:aaa.trim="100+2"></div>
    </div>	
    	
    <script src="vue.js"></script>
    <script>
    	Vue.directive('test', { 
    		inserted: function(el, binding) { 
    			el.innerText  = binding.value
    			
    			console.log(el)                   // 绑定的元素: <div class="txt"></div>
    	        console.log(binding.name)         // 指令名字: test
    	        console.log(binding.value)        // 值: 102
    	        console.log(binding.expression)   // 表达式: 100+2
    	        console.log(binding.arg)          // 指令参数: aaa
    	        console.log(binding.modifiers)    // 指令修饰符: {trim: true}
    		}
    	})
    	new Vue({ 
    		el: '#app'
    	})
    </script>
    </body>

# 局部自定义指令 #

<body>
    <div id="app">
    	<div class="box">
    		<input type="text" v-focus>
    	</div>
    </div>	
    	
    <script src="vue.js"></script>
    <script>
    	new Vue({ 
    		el: '#app',
    		data: { },
    		directives: { 
    			focus: { 
    				// 当被绑定的元素插入到 DOM 中时……
    				inserted: function(el, binding) { 
    					el.focus()       // 聚焦元素
    				}
    			}
    		}
    	})
    </script>
    </body>

# 全局自定义指令 #

<body>
    <div id="app">
    	<div class="box">
    		<input type="text" v-focus>
    	</div>
    </div>	
    	
    <script src="vue.js"></script>
    <script>
    	Vue.directive('focus', { 
      		// 当被绑定的元素插入到 DOM 中时……
      		inserted: function (el, binding) { 
        		el.focus()    // 聚焦元素
      		}
    	})
    	
    	new Vue({ 
    		el: '#app'
    	})
    </script>
    </body>

# 函数简写 #

1.  值为对象字面量

<body>
    <div id="app">
    	<div class="txt" v-textcolor="{color: 'red'}">我的颜色是自定义指令更改的</div>
    </div>	
    	
    <script src="vue.js"></script>
    <script>
    	Vue.directive('textcolor', function(el, binding) { 
    		el.style.color = binding.value.color
    	})
    	
    	new Vue({ 
    		el: '#app'
    	})
    </script>
    </body>

1.  值为表达式

<body>
    <div id="app">
    	<div class="txt" v-expresstion="100+2"></div>
    	<div class="txt" v-isshow="false">我是隐藏的盒子</div>
    	<div class="txt" v-addtext="text"></div>
    </div>	
    	
    <script src="vue.js"></script>
    <script>
    	Vue.directive('expresstion', function(el, binding) { 
    		el.innerText = binding.value
    	})
    	
    	Vue.directive('isshow', function(el, binding) { 
    		el.style.display = binding.value ? 'block':'none'
    	})
    	
    	Vue.directive('addtext', function(el, binding) { 
    		el.innerText = binding.value
    	})
    	
    	new Vue({ 
    		el: '#app',
    		data: { 
    			text: '哈哈，我是指令添加的'
    		}
    	})
    </script>
    </body>

# 小例子 #

<body>
    <div id="app">
    	
        <input type="text" v-color:bgcolor="bgColor"  v-color:fcolor="fColor">
    </div>
    <script src="vue.js"></script>
    <script>
    	/** * 自定义指令 * 名称 : v-color * 参数 : bgcolor(背景颜色) fcolor(字体颜色) */
    	
    	Vue.directive('color', { 
    		inserted(el, binding) { 
    		    // 背景颜色
    		    if (binding.arg === 'bgcolor') { 
    		       el.style.background = binding.value
    		    }
    		    // 字体颜色
    		    if ( binding.arg === 'fcolor') { 
    		    	el.style.color = binding.value
    		    }
    		}
    	})
    
    	new Vue({ 
            el: '#app',
            data: { 
            	bgColor: 'red',
            	fColor: 'yellow'
            }
    	})
    </script>
    </body>