Detailed explanation of Vue.js directive custom instructions

Vue.directive(id, definition)

<div id="app">
	<!-- Input box gets focus-->
	<input type="text" v-focus/>
</div>

<script>
	// Register a global custom directive v-focus
	Vue.directive("focus", {
		// When the bound element is inserted into the DOM.
		inserted(el, binding) {
			// Focus element el.focus();
		}
	})
</script>

<div id="app">
    <p v-demo:red="msg">{{msg}}</p>
</div>

<script>
	// Global directive Vue.directive('demo', function (el, binding) {
        console.log(el) //p tag console.log(binding) //The output is an object obj
        console.log('Command name:'+binding.name) //Command nameconsole.log('Command binding value:'+binding.value) //Command binding valueconsole.log('String form of binding value:'+binding.expression) //String form of binding valueconsole.log('Parameter passed to the command:'+binding.arg) //Parameter passed to the command})
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello!'
        },
        // Local directives:{
			demo:{
				inserted: function (el) {
					console.log(el)
				}      
			}
		}
    })
</script>

<div id="app">
    <p v-demo="colours">{{colours.text}}</p>
</div>

<script>
    Vue.directive('demo', function (el, binding) {
        console.log(el) // p tag console.log(binding) // The output is an object obj
        console.log(binding.value) // {color: 'blue',text: 'hello!'}
        console.log(binding.value.color) // 'blue'
        console.log(binding.value.text) // 'hello!'
        el.style = 'color:' + binding.value.color  
    })
    var vm = new Vue({
        el: "#app",
        data: {
            colours:
                color: 'blue',
                text: 'hello!'
            }
        }
    })
</script>

<div id="app">
    <p v-demo="color">{{num}}</p>
    <button @click="add">Add</button>
    <button onclick='unbind()'>Unbind</button>
</div>

<script>
    function unbind() {
        vm.$destroy(); //Start another method to unbind}
    Vue.directive('demo', { //Five hook functions for registering directives bind: function () { //1. Be bound //Prepare for binding. For example, add event listeners, or other complex operations that only need to be performed once console.log('1 - bind');
        },
        inserted: function () { //2. Bind to the node console.log('2 - inserted');
        },
        update: function () { //3. Component update//Perform corresponding updates based on the new values ​​obtained. For the initial value, console.log('3 - update'); will also be called once.
        },
        componentUpdated: function () { //4. Component update completed console.log('4 - componentUpdated');
        },
        unbind: function () { //5. Unbind//Do cleanup operations. For example, when removing the event listener bound by bind, console.log('5 - bind');
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            num: 10,
            color: 'red'
        },
        methods: {
            add: function () {
                this.num++;
            }
        }
    })
</script>