What are the components of Vue's built-in instructions?

There are 16 built-in instructions: v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v-bind, v-model, v-slot, v-pre, v-cloak, v-once, v-memo, v-is; v-memo is new in 3.2, and v-is is abandoned in 3.1.0. v-show is used to control the display and hiding of elements, and v-if is used to conditionally render elements based on the true or false value of an expression.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

1. What is a Vue command?

In Vue, a command is actually a special attribute.

Vue will do something behind the scenes based on the command. , as for what to do specifically, Vue will perform different operations according to different instructions. The specific

## instructions will be mentioned later. What are the characteristics

An obvious feature of Vue instructions is that they all start with v-, for example: v-text

<span v-text="msg"></span>

2, built-in instructions

2.1 What are the built-in instructions in Vue?

The built-in instructions refer to the instructions that come with Vue and can be used out of the box

Vue has a total of 16 built-in instructions, including:

v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v -on, v-bind, v-model, v-slot, v-pre, v-cloak, v-once, v-memo, v-is, v-memo is new in 3.2, v-is is in 3.1 Obsolete in .0

Let’s learn about the basic use of these built-in instructions

2.2 Understand the basic use of the 16 built-in instructions

2.2.1 v-text

The role of v-text is to update the textContent of the element, for example:

<h1 v-text="msg"></h1>

The content of the h1 element is final Depends on the value of msg

##2.2.2 v-html

is very similar to v-text, except that v-html uses For updating the innerHTML of the element, for example

<div v-html="&#39;<h1>Hello LBJ</h1>&#39;"></div>

It should be noted that the content inside must be inserted as ordinary HTML

2.2.3 v- show

v-show can switch the display value of the element according to the true or false value of the expression, which is used to control the display and hiding of the element, for example:

You can see that when the conditions change, this command triggers the transition effect of showing or hiding.

Note: v-show does not support the