Vue 100 Q (23-26 Q) What is the nature of the Vue instruction?

The problem

23. What vUE built-in commands have you used?

As long as you have used VUE to develop projects, you are very familiar with the common instructions, and you can be familiar with the uncommon instructions, at least when you see what they are used for.

v-text

Equivalent to innerText in native JS.

<p v-text="msg1">hello world</p>
<p>{{ msg2 }}</p>
data() {
  return {
    msg: 'hello lin',
    msg2: 'hell paul'
  }
}
Copy the code

MSG will eventually render Hello Lin, and v-text rendering will have a higher priority than writing text directly inside the tag.

It’s no different from writing an interpolation like MSg2 directly. It feels like chicken ribs. I haven’t used it much.

v-html

Equivalent to innerHtml in native JS.

<div v-html="htmlStr"></div>

data() {
  return {
    htmlStr: '<div style="color: red">hello world </div>',
  }
}

Copy the code

This directive is useful for displaying rich text.

v-pre

<span v-pre>{{ msg }}</span>
Copy the code

Because vue’s interpolation syntax is {{}}, Vue provides the v-pre instruction to display the original Mustache tag.

v-once

Render elements and components only once. In subsequent re-rendering, the element/component and all its child nodes are treated as static and skipped. This can be used to optimize update performance.

<! <span v-once>This will never change: {{MSG}}</span> <! - a child element -- -- > < div v - once > < h1 > comment < / h1 > < p > {{MSG}} < / p > < / div > <! <my-component v-once :comment=" MSG "></my-component> <! - ` v - for ` instructions - > < ul > < li v - for = "I in the list of" v - once > {{I}} < / li > < / ul >Copy the code

v-cloak

Basically not, because this directive is useless in single-file development mode, it is only needed when writing templates in HTML, so I won’t introduce it.

24. What is the nature of the VUE directive?

The essence of an instruction is syntactic sugar, or flag bit.

In fact, the VUE directive is not a fancy thing, it is just syntax sugar, or flag bits, to help simplify our code.

In the compilation stage of Vue, these instructions will be compiled into the corresponding JS code to achieve the corresponding functions during the process from template compilation to render function.

This is why JSX does not support VUE, and the Babel plugin @vue/babel-helper-vue-jsx-merge-props needs to be configured, because JSX itself is a syntax candy, Also compiled into the render function.

25. How to implement vUE custom instruction?

Vue allows you to register custom instructions in both global and local ways.

Register global directive

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

Register local directives

Component to accept a cache option:

directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}
Copy the code

You can then use the new V-focus property on any element in the template, as follows:

<input v-focus />
Copy the code

An instruction definition object can provide the following hook functions (all optional) :

• Bind: called only once, when the directive is first bound to an element. You can define an initialization action that is performed once at bind time, when the parent node is obtained as null.

• Inserted: Called when the bound element is inserted into a parent node (the parent node is guaranteed to exist, but not necessarily already inserted into the document), and the parent node can be obtained.

• 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. But you can ignore unnecessary template updates by comparing the values before and after the update

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

Let’s use the following example to get a sense of when these hook functions are called:

<button v-if="showBtn" v-append-text=" 'hello ${number}' "@click="number++"> </button> <button @click="showBtn =! "> </button> data() {return {showBtn: true, number: 1}} directives: {appendText: { bind() { console.log('bind :>> ') }, inserted(el, binding) { el.appendChild(document.createTextNode(binding.value)) console.log('inserted :>> ', el, binding) }, update() { console.log('update :>> ') }, componentUpdated(el, binding) { el.removeChild(el.childNodes[el.childNodes.length - 1]) el.appendChild(document.createTextNode(binding.value)) console.log('componentUpdated :>> ') }, unbind() { console.log('unbind :>> ') } } }Copy the code

This directive, V-append-text, does what it does to insert a textNode into an element.

As you can see, initialize when the page is refreshed, and execute bind and INSERTED.

Update and componentUpdated are executed when updating.

Unbind is executed for destruction.

26. What custom commands have you used?

Put together a list of useful commands I’ve seen or used.

cm-directives

• Copy and paste instructions V-copy
• Longpress command v-longpress
• Enter the box anti-shock command V-debounce
• No emojis or special characters are allowed

• Permission verification directive V-premission
• Realize page watermarking V-watermarker
• Drag instruction V-draggable

This library contains the above seven directives and is optional for NPM installation of cM-directives.

It is more recommended to copy the instruction code of this library to our own project, after all, there are many times to change, such as V-Premission. We usually need to discuss and agree with our own backend, and other instructions can be directly used after copy, the readme. md of this library is very detailed.

v-loadingloading

Element – UI provides built-in commands that support full screen and partial loading.

v-trackBuried point solution

V-track completely decouples buried code and business code by means of Vue custom instructions

v-sticktoA vUE instruction that supports multiple DOM elements to automatically suck the top

v-lazyloadLazy loading of images

The img tag supports lazy loading, so lazy loading is usually implemented using an image component that supports lazy loading (such as element-UI), or by writing a command.

Check out v-LazyLoad, eight very useful VUE directives in this article

There are more instructions that others have summarized that can be used to greatly improve development efficiency. These 15 Vue commands will make your project development fun

conclusion

The essence of the VUE directive is syntactic sugar that helps us simplify code and improve development efficiency.