Detailed explanation of filter and directive in Vue

There are two types of filters in vue: local filter and global filter

Filters can be used for some common text formatting. Filters can be used in two places: double brace interpolation and v-bind expressions (the latter is supported starting with 2.1.0+). Filters should be added at the end of a JavaScript expression, indicated by the "pipe" symbol (official documentation)

<!-- In double braces -->
{{ message | capitalize }}

<!-- exist `v-bind` middle -->
<div v-bind:></div>

1. Define a global filter without parameters

('capitalize', function(msg) {// msg is a fixed parameter, that is, the data you need to filter            if (!value) return ''
            value = ()
            return (0).toUpperCase() + (1)
       })

2. Define a global filter with parameters

 <div >
            <p>{{ msg | msgFormat('crazy','--')}}</p>
        </div>

        <script>
            // Define a Vue global filter called msgFormat            ('msgFormat', function(msg, arg, arg2) {
                // The replace method of the string, the first parameter, in addition to writing a string, can also define a regular                return (/simple/g, arg+arg2)
            })
      </script>

3. Local filter

The definition and usage of local filters with parameters and without parameters is the same as that of global filters. The only difference is that the local filter is defined in the instance of vue. The area it works for is also the area controlled by the vue instance

 // Create a Vue instance and get a ViewModel            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'msg'
                },
                methods: {},
                //Define private local filters.  Only available in the current vue object                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

vue custom directive --directive

Vue has many built-in instructions, such as v-model, v-show, v-html, etc., but sometimes these instructions cannot satisfy us, or we want to attach some special functions to elements. At this time, we need to use a very powerful function in vue - custom instructions.

Before we start, we need to be clear that the problems solved by custom instructions or usage scenarios are to perform underlying operations on ordinary DOM elements, so we cannot blindly use custom instructions.

Global commands

('focus', {
  // When the bound element is inserted into the DOM...  inserted: function (el) {
    // Focus on elements    ('placeholder', 'This is added by custom directives')
    ()
  }
})

Local instructions

directives: {
  focus: {
    // Definition of instructions    inserted: function (el) {
      ()
    }
  }
}

use

<input v-focus>

Hook functions (all optional)

bind: Only called once, the instruction is called the first time it is bound to an element. Here you can perform one-time initialization settings.

inserted: Called when the bound element is inserted into the parent node (only the parent node exists, but it may not be inserted into the document).

update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the instruction may have changed or not. However, you can ignore unnecessary template updates by comparing the values ​​before and after the update (see below for detailed hook function parameters).

componentUpdated: Called after the VNode and its child VNode of the component where the instruction is located.

unbind: It is called only once, and is called when the directive is unbined with the element.

Usage and parameters

Execute in order

//Custom command('focus', {
  bind: function (el, binding, vnode) {
    ("1")
  },
  inserted: function (el, binding, vnode) {
    ("2");
  },
  update: function (el, binding, vnode, oldVnode) {
    ("3");
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    ('4');
  },
  unbind: function (el, binding, vnode) {
    ('5');
  }
})

The above is a detailed explanation of filter and directive in Vue. For more information about filter and directive in Vue, please follow my other related articles!