Use of Vue filters and custom instructions

Filters

01. What is

The filter can perform necessary processing on the data we pass in and return the processing results.

• Filters do not modify data
• The essence of a filter is a function
• The filter function should have parameters, which must contain the source data you want to process.
• The filter should have a return value, returning the processed result

export default {
    // Create local filters through filters filters:{
        filter name(data){
            // Process the incoming data and return the processing result}  
    }
}

02. How to do it

(1) Define filters

• Local filter: defined inside a component and can only be used within the current component

Created through the filters structure

export default {
    // Create local filters through filters filters:{
      filter name(data){
          // Processing return processing result}  
    }
}

• Global filter: Create a global filter through Vue.filter. Only one can be created at a time and can be used in any component

Need to be defined before the Vue instance is created

Vue.filter(filter name, (data) => {
    // do something
    return processing result})

Create a global filter in a separate file, import it into the component you need, and register it in filters

import Vue from 'vue'
// Create a global filter through Vue.filter const filter1 = Vue.filter(filter name, (data) => {
    // do something
    return processing result})
// Export export {
    filter1
}

//In the component--introduce the filterimport { filter1 } from '@/utils/filters.js'

export default {
    // Add filters to the filters in the component // Filters can both create filters and register filters // Only filters registered in filters are considered filters filters: {
        filter1
    }
}

(2) Usage

• In an interpolation expression {{}} or a v-bind expression, use the filter with the pipeline operator ——|
• Format: {{ source data | filter }}

<div> {{ data | filter }} </div>

• Multiple use

The filter supports multiple parallel use, and the processing result of the former will be passed as the parameter of the latter.

<div> {{ data | filter1 | filter2 }}</div>

(3) Filter parameters

• If no parameters are passed manually, the data before the pipe character will be passed by default.
• If you pass parameters manually, it will not affect the passing of default parameters.
  • The first parameter of the filter function is always the data before the pipe character.
  • The manually passed parameters start from the second parameter in the parameter list and go backwards in order.
    

03. Encapsulate filter functions

• The essence of a filter is a function, so you can directly encapsulate a filter function in a single file

// define function const filterA = () => {}
const filterB = () => {}
// Export function object export { filterA, filterB }

• Then import the function into the required component and register it as a filter

import * as filters from './filters.js'
//Traverse the methods in filters.js Object.keys(filters).forEach(key => { 
  Vue.filter(key, filters[key])
})

Custom directives

01. What is

• To perform low-level operations on ordinary DOM elements, custom instructions are used
  • That is to say, custom instructions mainly operate on DOM elements
    

02. Basic Concepts

(1) Hook function

A directive definition object can provide the following hook functions (all optional):

• bind: Called only once, when the directive is first bound to an element. This hook function can be used to define an initialization event that is executed once during binding.
• inserted: called when the bound element is inserted into the parent node, as long as the parent node exists, even if it is not inserted into the document
• update: Called when the component to which the bound element belongs is updated, regardless of whether the bound value changes. But you can ignore unnecessary template updates by comparing the values ​​before and after the update.
• componentUpdated: Called when all components of the bound element are updated, that is, when an update cycle is completed.
• unbind: Called only once, when the instruction is unbound from the element
  

(2) Parameters

The command hook function will be passed the following parameters:

• el: The element to which the instruction is bound, which can be used to directly manipulate the DOM, that is, the element where the instruction is placed
• binding: an object containing multiple attributes
  • name: the command name, without the v- prefix
  • value: The value bound to the instruction. You can bind an object to pass multiple values.
  • oldValue: The old value bound to the directive, which is not available in update and componentUpdated hooks, regardless of whether the value has changed
  • expression: command expression in string form
  • arg: the parameter passed to the command
  • modifiers: An object containing modifiers
• vnode: virtual node generated by Vue compilation
• oldVnode: the previous virtual node, only available in update and componentUpdated hooks

// <div v-demo:left="100"></div>
// The left here is the arg of the command's binding object
// 100 is the value of the command's binding object
Vue.directive('demo',{
    // el--indicates the bound element, that is, the element where the instruction is placed bind(el,binding,vnode){
        // You can directly process this element el.style.position = 'fixed';
        const s = ( binding.arg == 'left' ? 'left' : top );
        el.style[s] = binding.value + 'px';
    }
})

03. Command registration

(1) Global registration

Register a global directive via Vue.directive(), which contains two parameters:

• The first parameter is the custom command name. The command name does not need to be prefixed with v-. The prefix is ​​automatically added by default. Just add the prefix when using the command.
• The second parameter can be object data or a command function

Vue.directive("directive name", {
    inserted: function(el){
        // do something
    }
})

(2) Local registration

Register local custom directives by adding directives object data to the Vue instance

export default {
    directives: {
        Command name: {
            function}
    }
}

The above is the detailed content of the use of vue filters and custom instructions. For more information about vue filters and custom instructions, please pay attention to other related articles on 123WORDPRESS.COM!