Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Vue3 custom instruction details

Vue includes v-if, V-for, V-bind, V-show, V-model… And so on a series of convenient and quick instructions today to understand the vUE provides a custom instruction

Vue3 Custom instruction life cycle

  • When the created element is initialized
  • BeforeMount directives are called only once after binding to elements
  • The Mounted element inserts the parent DOM call
  • BeforeUpdate elements are called before they are updated
  • Update The periodic method is removed and updated instead
  • BeforeUnmount called before an element is removed
  • After the unmounted command is removed, it can be invoked only once

Example of instruction life cycle

const Directive = {
  created() {}, 
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, 
  updated() {},
  beforeUnmount() {},
  unmounted(){}}Copy the code

Sample global instruction

The input focus
  • This command automatically focuses the input box
  • Write directives in the main.js file
  • El is the current mounted element
import { createApp } from 'vue'
const app  = createApp({})
app.directive('focus', {
  // When the element is mounted
  mounted(el) {
    // Focus elements
    el.focus()
  }
})
Copy the code
  • To take effect, write V-focus on the input box
Element click effect
  • The command can be clicked feedback effect
  • Introduce common CSS in the main.js file
.button:active {
  transform: translateY(4px);
}
Copy the code
import './main.css'

app.directive('active', {
    mounted(el) {
        el.classList.add('button')}})Copy the code
  • Mounting instructions on any component has the effect of moving up and down

Sample local instructions

The input focus
  • The instruction code is written in the current component file
  • Valid only in the current component
directives: {
  focus: {
    mounted(el) {
      el.focus()
    }
  }
}
Copy the code

Custom instruction parameters

  • The el element itself
  • binding
    • Intance Indicates the current component instance
    • Value Specifies the value passed by the directive
      • For example,<input v-focus="2"/>
    • OldValue the old value
      • Available only in beforeUpdate and Updated
    • The parameter passed by the ARG instruction
      • For example,<input v-focus:foo/>
    • Modifiers contain modifiers
      • For example,<input v-focus.foo.bar/>
      • The modifier object is{foo: true, bar: true}
    • Dir An object passed as a parameter when a directive is registered 
      app.directive('active', 
{mounted(el) {
el.classList.add('button')}})/ / dir refers to
{mounted(el) {
el.classList.add('button')}}Copy the code
  • The virtual DOM of the vNode element
  • A virtual DOM on prevVnode is only available on beforeUpdate and Updated

conclusion

  • The directive can also be written in a separate folder to use main.js with app.use for brevity. You can go to…………