How to write the user-defined instructions of vue3 with the global user-defined instructions of vue3. Hook function of custom instruction. Easy to understand

1, Let's first look at the hook of Vue2 custom instruction

  • bind: triggered when the instruction is bound to the corresponding element. It will only trigger once.

  • Inserted: triggered when the corresponding element is inserted into the parent element of the DOM.

  • Update: this hook will be triggered when the element is updated (at this time, the descendant element of the element has not triggered the update).

  • Component updated: this hook is triggered when the entire component (including sub components) is updated.

  • unbind: this hook is triggered when the instruction is removed from the element. Only triggered once.

2, In Vue3, in order to make the code more readable and uniform, the official changed the hook name of custom instructions to be more like the component life cycle, although they are two different things

  • bind => beforeMount

  • inserted => mounted

  • beforeUpdate: a new hook will be triggered before the element itself is updated

  • Update = > remove!

  • componentUpdated => updated

  • beforeUnmount: a new hook that is triggered before the element itself is unloaded

  • unbind => unmounted

3, Life cycle hook function in custom instruction

The instruction definition object can provide the following hook functions (introduced on demand)

  • created: the binding element property or event listener is invoked before it is applied. This instruction is useful when attaching event listeners that need to be invoked before the ordinary v-on event listener.

  • Before mounted: when an instruction is first bound to an element and executed before the parent component is mounted.

  • Mounted: the parent component of the binding element is called after it is mounted.

  • beforeUpdate: before updating the VNode containing the component.

  • updated: call after updating the VNode of the component and its subcomponents after updating VNode.

  • beforeUnmounted: before uninstalling the parent component of the binding element.

  • unmounted: called only once when the instruction is unbound from the element and the parent component is unloaded.

1, Register a global custom instruction and create a folder busdirective > index.js

export default {
    install(app) { 
        app.directive('color', { // color is the name of the instruction
            created(el, binding) { // el is the currently bound element, and binding is an object
                console.log(binding.value);
                el.style.backgroundColor = binding.value // binding.value is the content of instruction binding and the value in the equal sign
            },
            updated(el, binding) {
                el.style.backgroundColor = binding.value
            },
        })
    }
} 

1. The hook function is given the following parameters: el: the element bound by the instruction, which can directly operate the DOM. binding: an object that contains all the information of the instruction. binding contains the following attributes:

2. arg parameter name of the custom directive. Value the value bound by the custom instruction. The previous value bound by the oldValue instruction. dir hook function modifiers: an object containing modifiers.

2, Used in min.js

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 + import directive from './busDirective/index'
createApp(App).use(store).use(router).use(directive).mount('#app') // use

3, Then, match with vuex's state v-color to change the color of the specified element

<template>
  <div>
    <div v-color="'red'">Global instructions can cooperate with global instructions state Flexible use of data</div>
  </div>
</template>
​
<script>
export default {
  setup() {},
};
</script>
<style scoped>
div {
  width: 200px;
  height: 200px;
}
</style>

1, Custom instruction writing format in vue3 component

<template>
  <div>
    <div v-color="'Value to pass'">vue3 Component level custom assignment</div>
  </div>
</template>
​
<script>
//Custom instruction dynamic parameters
const autoFocus = {
  color: {
    beforeMount(el, binding) {
      console.log("el", el);
      el.style.backgroundColor = "pink";
      console.log(binding.value); // Value to pass
    },
  },
};
export default {
  directives: autoFocus,
  setup() {},
};
</script>
<style scoped>
div {
  width: 200px;
  height: 200px;
}
</style>

Tags: Javascript Front-end Vue.js

Posted on Fri, 03 Dec 2021 08:56:27 -0500 by osti