The filter

01. What

  • The filter performs the necessary processing on the data we pass in and returns the result of the processing

    • Filters do not modify data
    • Filters are essentially functions
    • Filter functions should have parameters that contain the source data you want to process
    • The filter should have a return value that returns the result of the processing
    export default {
    // Create local filters through filters
    filtersFilter name (data){// Process the incoming data
            returnResults}}}Copy the code

02. How to do

(1) Define the filter

  • Local filters: Defined within a component and can only be used within the current component

    • throughfiltersStructure to create
    export default {
    // Create local filters through filters
    filtersFilter name (data){// process
          returnResults}}}Copy the code

  • Global filter: Use vue. filter to create a global filter. You can create only one global filter at a time and use it in any component

    • Need to be defined before the Vue instance is created
    Vue. Filter (Filter name, (data) => {// do something
    returnProcessing results})Copy the code
    • Create a global filter in a separate file
    • In the components that need to be used, and infiltersRegistered in
    import Vue from 'vue'
// Use vue. filter to create a global filter
constFilter1 = vue. filter(Filter name, (data) => {// do something
    returnProcessing results})/ / export
export {
    filter1
}
Copy the code
    // In the component -- introduce filters
import { filter1 } from '@/utils/filters.js'

export default {
    // In the filters within the component, add a filter
    // filters can be used to both create filters and register filters
    // Only those registered in filters are considered filters
    filters: {
        filter1
    }
}
Copy the code

(2) Mode of use

  • In interpolation expression {{}}, or v – bind expression, used by pipeline operators – | filter

  • Format: {{source data | filter}}

    <div>{{| data filter}}</div>
Copy the code

  • Used multiple times

    • Filters can be used in parallel, and the results of the former are passed in as parameters of the latter
    <div>{{data filter filter | 1 | 2}}</div>
Copy the code

(3) Filter parameters

  • If the parameter is not passed manually, the data in front of the pipe character is passed by default

  • If the parameters are passed manually, the default parameters will not be affected

    • The first argument to the filter function is always the data before the pipe character
    • Manually passed parameters start at the second in the parameter list and work backwards

Encapsulate filter function

  • A filter is essentially a function, so you can encapsulate a filter function in a single file

    // Define the function
const filterA = () = > {}
const filterB = () = > {}
// Export the function object
export { filterA, filterB }
Copy the code

  • Then import functions into the required components and register them as filters

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

Custom instruction

01. What

  • Custom instructions are used to perform low-level operations on ordinary DOM elements
    • That is, custom directives operate primarily on DOM elements

02. Basic concepts

(1) Hook function

  • An instruction definition object can provide the following hook functions (all optional) :

    • bindThis hook function is used to define an initialization event that is to be executed once at the time of the 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 value of the binding has changed. However, you can ignore unnecessary template updates by comparing the values before and after the update
    • componentUpdated: called when all updates have been made to the component to which the bound element belongs, i.e., when an update cycle has completed
    • unbind: called only once, when directives are unbound from elements

(2) Parameters

  • The instruction hook function is passed the following arguments:

    • elThe element to which the directive binds can be used to directly manipulate the DOM, the element in which the directive is placed
    • binding: An object containing multiple properties
      • name: Directive name, nonev-The prefix
      • value: The value of an instruction binding that can bind an object to pass multiple values
      • oldValue: Old value of instruction binding, disabledupdateandcomponentUpdatedHooks are available regardless of whether the value changes
      • expression: Command expression in the form of a string
      • arg: Parameter passed to the instruction
      • modifiers: an object that contains modifiers
    • vnode: virtual node generated by Vue compilation
    • oldVnode: Indicates the last virtual nodeupdate 和 componentUpdatedAvailable in hooks
    // <div v-demo:left="100"></div>
// Left is the arG of the instruction's bingding object
// 100 is the value of the directive's bingding object
Vue.directive('demo', {// el-- represents the bound element, that is, the element on which the directive is placed
    bind(el,binding,vnode){
        // You can do some processing on this element directly
        el.style.position = 'fixed';
        const s = ( binding.arg == 'left' ? 'left' : top );
        el.style[s] = binding.value + 'px'; }})Copy the code

03. Instruction registration

(1) Global registration

  • Register a global directive with vue.directive (), which contains two parameters:

    • The first parameter is the custom instruction name, which does not need to be addedv-Prefix: the prefix is automatically added by default. You can add the prefix when using the command
    • The second argument can be object data or an instruction function
    Vue.directive("Instruction name", {
    inserted: function(el){
        // do something}})Copy the code

(2) Local registration

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

    export default {
    directivesInstruction name :{function}}}Copy the code

I front-end side dish chicken, if there is wrong, please forgive