Detailed explanation of Vue custom instructions

Vue custom directive

Custom directives
Hook function
Output related attributes
Application Examples

Summarize

Vue custom directive

Custom directives

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-fo>
		</div>
		<script>
            // Register custom directive Vue.directive('fo',{
				inserted:function(el){
                    // Focus element el.focus()
				}
			})
			new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>

Open the interface and place the cursor directly in the input box

Hook function

The directive definition function provides several hook functions (optional).

bind : Called only once, when the directive is first bound to an element. This hook function can be used to define an initialization action that is executed once during binding.
inserted : Called when the bound element is inserted into the parent node (it can be called if the parent node exists, not necessarily in the document).
update : Called when the template where the bound element is located is updated, regardless of whether the bound value changes. By comparing binding values before and after the update, unnecessary template updates can be ignored.
componentUpdated : Called when the template of the bound element completes an update cycle.
unbind : Called only once, when the directive is unbound from the element.

The parameters of the hook function mainly include the following

el : The element to which the instruction is bound, which can be used to directly manipulate the DOM.
binding : an object containing the following properties
name : The name of the directive, without the v- prefix.
value : The binding value of the directive, for example, v-my-directive="1+1", the value is 2.
oldValue : The previous value bound to the directive, only available in update and componentUpdated hooks, regardless of whether the value has changed.
expression : The expression or variable name of the binding value, for example, v-my-directive="1+1", the value of expression is "1+1".
arg : The parameter passed to the directive, for example, v-my-directive:foo, the value of arg is "foo".
modifiers : An object containing modifiers, for example v-my-directive.foo.bar , the value of the modifier object modifiers is {foo: true, bar: true} .
vnode : The virtual node generated by Vue compilation.
oldVnode : The previous virtual node, only available in update and componentUpdated hooks.

Output related attributes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app" v-hh:abc="mess">
		</div>
		<script>
			Vue.directive('hh',{
				bind: function(el,binding,vnode){
					var s = JSON.stringify
					el.innerHTML = 'name:'+s(binding.name)+'<br>'+
					'value:'+s(binding.value)+'<br>'+
					'expression:'+s(binding.expression)+'<br>'+
					'argument:'+s(binding.arg)+'<br>'+
					'modifiers:'+s(binding.modifiers)+'<br>'+
					'vnode keys:'+Object.keys(vnode).join(',')
				}
			})
			new Vue({
				el:'#app',
				data:{
					mess:'abc'
				}
			})
		</script>
	</body>
</html>

Application Examples

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-hh="{text:'123',c:'blue'}"></div>
		</div>
		<script>
			Vue.directive('hh',function(el,binding){
				el.innerHTML=binding.value.text
				el.style.color=binding.value.c
			})
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>