Vue filter

vue.filter('myFilter'.function(val){
 return val.split(' ').reverse().join(' ')})new Vue({el:'#app'.data(){
    return{
        message:'testData'
    }
}})
<div id='app'>
<p>{message|myFilter}</p>
</div>
Copy the code

The plug-in

Vue. use internally calls the install method of the plug-in; For example, the component library use method implements install, which internally declares the corresponding component via Vue.component(button.name,Button)

import Button from './src/index.vue'

myPlugin.install=function(Vue){
 Vue.prototype.$myMethod=function(){
     
 }
 Vue.component(Button.name,Button)
}
export default=myPlugin

Vue.use(myPlugin)
Copy the code

Custom instruction

Similar to the common V-model V-text, we can expand the development of custom instructions, need to pay attention to the corresponding hook function

  • 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.

Vue.directive('focus', {inserted:function(el){
      el.focus()
    }
})

<input v-focus>
Copy the code