instruction

Form: Element attribute custom directives allow you to perform low-level operations on DOM elements (in fact, Vue as a framework is data-oriented, it is more support for data-oriented programming) built-in directives and custom directives, you can understand the essence of the instructions by defining their own

Common built-in instructions

  1. V – show | v – if | v – else – the if (difference: the former: CSS: the display – none control joined the DOM Tree, which is not to join the DOM Tree)

2. V-for: traversal list, object, integer (from 1) (whether to set key value, dynamic two-way binding) 3. V-model: bidirectional binding of some form elements 6. v-html (XSS warning) 7. v-text 8. v-once 9.** V-on event handling (type on the blackboard! ** abbreviate @ 10.V-preCopy the code

Use mode of custom instruction: register before use

  1. Comply with registration directives: global, local (can only be used in bound views)
// Global registration
Vue.directive(id,[definition])

// Locally register v-focus
new Vue({
    el:"#app".directives: {
        focus: {}}})Copy the code
  1. Use instructions: The same as the built-in instructions provided by Vue.
<div v-mydirective></div>// v-myDirective specifies a self-defined directiveCopy the code

Custom instruction hook functions

  1. Bind is called only once, the first time the directive is bound to an element. Suitable for one-off initialization operations
  2. Inserted Called when the bound element is inserted into the parent node.
  3. Update called when the vNode of the component is updated,
  4. ComponentUpdated is invoked when the VNodes of the component and its children are all updated
  5. Unbind is called only once, when the directive is unbound from the element.
<div id="app">
        <input type="text" v-focus>
    </div>
    <script src=".. /node_modules/vue/dist/vue.js"></script>
    <script>
        // Register global custom attributes
        Vue.directive('focus', {
            inserted: function(el) {
                // Focus elementsel.focus(); }});const app = new Vue({
            el: "#app"});</script>
Copy the code

Arguments in the hook function

  1. El: The element bound by the directive that can be used to manipulate the DOM directly
  2. Binding: An object containing the following attributes:
    • Name specifies the name of the directive (without the v- prefix, the name in v-focus is focus).
    • Value Specifies the value bound by the directive, v-focus=”1+2″ value = 2
    • OldValue The preceding value is only available in the UPDATE and componentUpdated hooks.
    • Expression Specifies an instruction expression in the form of a string. V-focus =”1+2″ expression=”1+1″
    • The arg directive passes the argument V-my :foo where arg is foo
    • Modifiers modifier
    • Vnode Virtual node generated after Vue compilation
    • A virtual node on odlVnode is only used in update and componentUpdated hooks
<body>
    <div id="app" v-demo:foo.a.b="message">
    </div>
    <script src=".. /node_modules/vue/dist/vue.js"></script>
    <script>
        // Define the global directive
        Vue.directive('demo', {
            bind: function(el, binding, vnode) {
                var s = JSON.stringify;
                el.innerHTML =
                    '1. name: ' + s(binding.name) + '<br />' +
                    '2. value: ' + s(binding.value) + '<br />' +
                    '3. expression: ' + s(binding.expression) + '<br />' +
                    '4. argument: ' + s(binding.arg) + '<br />' +
                    '5. modifiers: ' + s(binding.modifiers) + '<br />' +
                    '6. vnode keys: ' + Object.keys(vnode).join(', ') + '<br />';
            }

            // object.keys () gets all the attributes of the Object
        });
        const app = new Vue({
            el: "#app".data: {
                message: "Vue.js is awesome!"
            },
            methods: {}})</script>
</body>
Copy the code

Function shorthand

If bind and update behave the same, and the custom directive only needs to use these two functions, you can abbreviate.

    <div id="app">
        <p v-color-swatch="color">I'm just handsome!</p>
    </div>
    <script src=".. /node_modules/vue/dist/vue.js"></script>
    <script>
        // Function replaces the bind and update hook functions
        Vue.directive('color-swatch'.function(el, binding) {
            console.log(el, binding);
            el.style.backgroundColor = binding.value;
        });
        const app = new Vue({
            el: "#app".data: {
                color: "red"}})</script>
Copy the code

Pass an object literal to the instruction

The value passed to the directive allows any valid JavaScript expression to be passed in an object literal


<div id="app">
        <div v-demo="{color:'white',text:'hello! '}"></div>
    </div>
    <script src=".. /node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.directive('demo'.function(el, binding) {
            const {
                color,
                text
            } = binding.value;
            console.log(color);
            console.log(text);
        })
        const app = new Vue({
            el: "#app"
        })
    </script>
Copy the code

The actual combat of custom instruction: simulation of Tmall navigation

https://github.com/suckitfa/dropdown-menu.git
Copy the code

reference

- Vue. Js from entry to actual combat - official document of VueCopy the code