Shulou(Shulou.com)06/02 Report--

This article mainly explains the "vue3 custom instruction method is what", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue3 custom instruction method is what" it!

First, register custom instructions

The following examples are custom instructions that implement an input box to automatically get focus.

1.1. Global Custom Directive

In vue2, global custom instructions are mounted to the Vue object through directive, using Vue.directive ('name',opt).

Instance 1:Vue2 global custom directive

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

Inserted is a hook function that executes when a binding element is inserted into the parent node.

In vue3, vue instances are created through createApp, so the mount of global custom instructions has changed, and directive is mounted on app.

Instance 2:Vue3 global custom directive

/ / Global custom directive app.directive ('focus', {mounted (el) {el.focus ()}}) / / component uses 1.2,partial custom directives

Within the component, what is introduced using directives is called a local custom instruction. The custom instruction introduction of Vue2 and Vue3 is exactly the same.

Example 3: partial custom instruction

/ / partial custom instruction const defineDir = {focus: {mounted (el) {el.focus ()}} export default {directives:defineDir, setup () {}} II. Life cycle hook function in custom instruction

An instruction definition object can provide the following hook functions (all optional and introduced as needed)

Created: called before binding element attributes or event listeners are applied. This is useful when this instruction needs to attach event listeners that need to be called in front of a normal v-on event listener.

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

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

BeforeUpdate: called before updating the VNode that contains the component.

Updated: called after the VNode update that contains the VNode of the component and its subcomponents.

BeforeUnmounted: called before unloading the parent component of a bound element

Unmounted: called only once when the instruction is unbound from the element and the parent component has been unloaded.

Example 3: life cycle function execution within test instructions

{{show?' Hide': 'show'}} / / partial custom instructions const autoFocus = {focus: {created () {console.log ('created');}, beforeMount () {console.log (' beforeMount');}, mounted (el) {console.log ('mounted');}, beforeUpdated () {console.log (' beforeUpdated')}, updated () {console.log ('updated');}, beforeUnmount () {console.log (' beforeUnmount') }, unmounted () {console.log ('unmounted');}},} import {ref} from' vue'export default {directives:autoFocus, setup () {const show = ref (true) return {show, changStatus () {show.value =! show.value}

By clicking the button, we find that when the input element is created, the three hook functions created, beforeMount, and mounted are triggered.

BeforeUnmount and unmounted are triggered when the input element is hidden.

However, the beforeUpdate and updated functions we added are not executed.

At this point, we modify the v-if on the input element to v-show and the above two methods will be executed, and the specific implementation will be verified by ourselves.

When upgrading from vue2 to vue3, the lifecycle hook function of a custom instruction has changed as follows:

The bind function is replaced with beforeMounted.

Update has been removed.

ComponentUpdated has been replaced with updated.

Unbind has been replaced with unmounted.

Inserted has been removed.

Parameters of the custom instruction hook function

The hook function is assigned the following parameters:

El: the element bound by the instruction, which can be directly manipulated with DOM.

Binding: is an object that contains all the information about the instruction.

The attributes contained in binding are:

The parameter name of the arg custom instruction.

The value of the value custom instruction binding.

The previous value bound by the oldValue instruction.

Hook function executed by dir

Modifiers: an object that contains modifiers.

Positioning / / Custom instruction dynamic parameters const autoFocus = {fixed: {beforeMount (el,binding) {console.log ('el',el) console.log (' binding',binding)}} export default {directives:autoFocus, setup () {}} IV. Custom instruction parameters

Custom instructions can also take parameters, the parameters can be dynamic, and the parameters can be updated in real time according to the component instance data.

Example 4: custom instruction dynamic parameters

Positioning / / Custom instruction dynamic parameters const autoFocus = {fixed: {beforeMount (el,binding) {el.style.position = "fixed" el.style.left = binding.value.left+'px' el.style.top = binding.value.top + 'px'} export default {directives:autoFocus, setup () {const posData = {left:20, top:200} return {posData,}

When do you need custom instructions?

Custom instructions are used when you need to perform low-level operations on ordinary DOM elements.

Some functionality needs to be used on specified DOM elements, but when you need to manipulate a large number of DOM elements or major changes, it is recommended to use components rather than instructions.

Thank you for reading, the above is the content of "what is the method of vue3 custom instruction". After the study of this article, I believe you have a deeper understanding of what the method of vue3 custom instruction is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.