Filters and custom plug-ins in Vue component development

Time:2021-10-20

Filters and custom plug-ins in Vue

I can’t think of it. Bring the official oneVue.js allows you to customize filters that can be used for some common text formatting. Filters can be used in two places: Double curly braces and interpolation  v-bind  expression   (the latter is supported from 2.1.0 +). The filter should be added at the end of the JavaScript expression and indicated by the “pipe” symbol. The pipe refers to ‘|’ (above the Enter key), which is divided into local filter and global filter. Please go down

The global filter syntax is:

import Vue from 'vue'
Vue. Filter ('filter name ', (value) = >{
console.log(value)
return ''
/**
*Value is the text where it is inserted
*The filter must return a result, that is, the operation on the text
*
*/
})

Local filter syntax:

data () {
    return {

    }
},
//Local filter
filters:{
/**
*
*Function writing, support ES6
*The function name is the filter name
*Function has a formal parameter, which is the text you want to operate on
*
*/
myFilter(value){
    return ''
//Just like the global filter
  }
}

 

Use in components:

 

{{data defined in data | filter name defined}}
 

 

————————————————————————————————————————————————————-Gorgeous dividing line—————————————————————————————————————————————————————————— ———-

I believe you must have used the UI component library, so you must have seen Vue. Use (), so what exactly does this use do???? I don’t know whether it’s embarrassing or not. This belongs to Vue’s source code analysis. Anyway, it’s OK to use a plugin plug-in, just like Vue. Use (elementui) component library. Let’s start

Explanation of our dark horse community:

① : vue.use is initialized through the inituse method. Vue.use accepts a parameter plugin. The method detects whether the installedplugins array already contains the components to be registered. It can be seen that the plug-in is only allowed to be registered once, and the secondary registration is invalid.

② : call toArray to convert the transferred in parameters into an array

③ : insert the current Vue object this into the converted array

④ : judge whether install in the plugin is a method. If yes, pass in the plugin and the converted array; In addition, if the plugin itself is a method, pass in the converted array and then execute this method. It can be seen that vue.use (plug-in) will actually call the install method of the plug-in, and parameters can be passed when calling use.

Note: as you can see from the above, Vue only handles two cases in the plugin, that is, either the plugin has an install function or the plugin itself is a function.

⑤ : push the registered plug-in into installedplugins to avoid repeated registration, return to the current instance, and the code execution ends.

Write a plug-in like this:

Import coma from '@ / components / coma. Vue' // first, you need to export an object
export default {
    //There is a function that is officially defined and must be written. The installed English function has a formal parameter of Vue
   install(Vue){
     //There are two ways to write user-defined instructions
   Vue. Directive ('custom instruction name ', / * * you can write a function or an object. The benefits of the object can call other APIs*/{
   //There is an option
                inserted(el){
                     //El is the element
                    Console.log (EL) // for more options, see the https://cn.vuejs.org/v2/api/#Vue -Direct view
                }
             }), // you can also add the imported Vue. Component ('com-a ', coma) of public components
         }     
   }