Directives instruction

Custom instruction

I’ve learned some of the built-in commands, such as V-if, V-for, V-show, V-HTML, etc

So how do you make a command yourself?

Goal: Build V-x, click and an X appears

Two kinds of writing

Declare a global directive
Vue.directive('x',directiveOptions)
Copy the code

Example: the global directive V-x

Declare a local directive
new Vue({ ... , directives: { "x": directiveOptions } })Copy the code

V-x can only be used in this example. Click to see an example

directiveOptions

  • bind(el,info,vnode,oldVnode)

    Only called once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings

  • inserted(el,info,vnode,oldVnode)

    Called when the bound element is inserted into the parent (the parent is guaranteed to exist, but not necessarily inserted into the document)

  • update(el,info,vnode,oldVnode)

    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

  • componentUpdated(el,info,vnode,oldVnode)

    Called after the VNode of the component where the directive resides and its child VNodes are all updated

  • unbind(el,info,vnode,oldVnode)

    Only called once, when an instruction is unbound from an element

Homemade V-ON2 command, imitate V-ON

Abbreviation: directiveOptions can be abbreviated to functions under certain conditions, directing official documents

Function of instruction

Mainly used for DOM operations

Vue instances/components are used for data binding, event listening, and DOM updates

Vue directives as long as the purpose is native DOM manipulation

Reduce duplication

If a DOM operation is used frequently, it can be encapsulated as an instruction

If each DOM operation is more complex, it can also be encapsulated as an instruction

Mixins with

Reduce duplication

analogy

Directives are to reduce duplication of DOM operations

Mixins reduce duplication of data, methods, and hooks

Scene description

The sample

Assume that name and time need to be added to each component. When created or deStoryed, the prompt is displayed and the lifetime is reported.

There are five components. How do you do that?

Idea 1 — Add data and hooks to each component five times

Idea 2 — Or use mixins to reduce repetition

Mixins skills

Option smart merge

The official documentation

Vue.mixin

Global mixins, official documentation

Extends inheritance

The sample

Reduce duplication — same needs as mixins:

If you don’t want to write a mixins every time, you can use vue. extend or options.extends

Extends is a more abstract wrapper than mixins and is rarely used in practice

Provide Provides and inject

demand

The sample

Scenario Description:

  • Achieve one key skin change function: default blue, can be switched to red

  • Text size: normal by default, can be changed to large or small

conclusion

role

A wide range of data and method sharing

Pay attention to

You cannot just pass themeName without passing changeTheme, because the value of themeName is copied to provide