There are two types of filters in VUE: local filters and global filters

Filters can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter supported as of 2.1.0+). Filters should be added to the end of JavaScript expressions, indicated by the “pipe” symbol (official documentation)

<! - in a pair of curly braces - > {{message | capitalize}} <! -`v-bind`-- - ><div v-bind:id="rawId | formatId"></div>
Copy the code

1. Define a global filter with no parameters

Vue.filter('capitalize'.function(msg) {// MSG is a fixed parameter that you need to filter
            if(! value)return ' '
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)})Copy the code

2. Define a global filter with parameters

 <div id="app">
            <p>{{MSG | msgFormat (' crazy ', '-')}}</p>
        </div>

        <script>
            // Define a Vue global filter named msgFormat
            Vue.filter('msgFormat'.function(msg, arg, arg2) {
                // String replace method, the first argument, can define a re in addition to writing a string
                return msg.replace(/ simple/g, arg+arg2)
            })
      </script>
Copy the code

3. Local filter

Local filters with and without parameters are defined and used in the same way as global filters. The only difference is that local filters are defined in vUE instances. The area it works on is also the area controlled by the VUE instance

 // Create Vue instance, get ViewModel
            var vm = new Vue({
                el: '#app'.data: {
                    msg: 'msg'
                },
                methods: {},
                // Define a private local filter. Can only be used in the current VUE object
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx'; }}});Copy the code

Vue custom directive –directive

Vue has a lot of built-in instructions, such as V-model, V-show, V-HTML, etc., but sometimes these instructions do not satisfy us, or we want to add some special functions to the elements, when we need to use a very powerful function in Vue – custom instructions.

Before we begin, we need to make it clear that custom directives solve problems or use scenarios that involve low-level manipulation of ordinary DOM elements, so we can’t just blindly use custom directives.

Global directives

Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus elements
    el.setAttribute('placeholder'.'This is a custom instruction added.')
    el.focus()
  }
})

Copy the code

Local instructions

directives: {
  focus: {
    // The definition of a directive
    inserted: function (el) {
      el.focus()
    }
  }
}
Copy the code

use

<input v-focus>

Hook functions (both optional)

Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings.

Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document).

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

ComponentUpdated: Invoked when the VNode of the component where the directive resides and its child VNodes are all updated.

Unbind: Called only once, when an instruction is unbound from an element.

Usage and parameters

Run in order

// Custom instruction
Vue.directive('focus', {
  bind: function (el, binding, vnode) {
    console.log("1")},inserted: function (el, binding, vnode) {
    console.log("2");
  },
  update: function (el, binding, vnode, oldVnode) {
    console.log("3");
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    console.log('4');
  },
  unbind: function (el, binding, vnode) {
    console.log('5'); }})Copy the code