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

2.2.4 v-if

v-if is used to conditionally render elements based on the true or false value of an expression

Compared with v-show Than, v-if is the destruction or reconstruction of the element when switching, rather than simply showing and hiding

You can see that when the expression is false, v-if is Destroy the element directly, while v-show only hides it visually

And v-if can be

2.2.5 v-else

v-else does not require an expression, which means adding an "else block", which is equivalent to displaying the elements of v-if when v-if meets the conditions , otherwise display v-else elements, for example:

Note: the sibling element before v-else must have v-if or v-else-if

2.2.6 v-else-if

Similarly, it represents the "else if block" of v-if. Like v-else, the previous sibling element must have v -if or v-else-if, for example:

2.2.7 v-for

v-for one for Iterative instructions can render elements or template blocks multiple times based on source data, for example:

You can also specify aliases for array indexes or keys for objects

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

2.2.8 v-on

v-on is used to bind events to elements, which can be abbreviated as: @

Modifier

.stop - calls event.stopPropagation()
.prevent - calls event.preventDefault()
. capture - Use the capture mode when adding an event listener
.self - Only trigger the callback if the event is triggered from the element itself to which the listener is bound
.{keyAlias} - The callback is only triggered if the event is triggered from a specific key
.once - The callback is only triggered once
.left - only fires when the left mouse button is clicked
.right - only fires when the right mouse button is clicked
. middle - only fires when the middle mouse button is clicked

• .passive - { passive: true } 模式添加侦听器

例如：

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

需要注意，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件

2.2.9 v-bind

v-bind用于绑定数据和元素属性，可以缩写为: 或.(当使用 .prop 修饰符时)，比如

<div :someProperty.prop="someObject"></div>
<!-- 相当于 -->
<div .someProperty="someObject"></div>

v-bind的3个修饰符

• .camel - 将 kebab-case attribute 名转换为 camelCase

• .prop - 将一个绑定强制设置为一个 DOM property。3.2+

• .attr - 将一个绑定强制设置为一个 DOM attribute。3.2+

2.2.10 v-model

v-model限制于：

components

v-model的3个修饰符：

• .lazy - 惰性更新，监听 change 而不是 input 事件

• .number - 输入字符串转为有效的数字

• .trim - 输入首尾空格过滤

在表单控件或者组件上可以创建双向绑定，例如：

2.2.11 v-slot

v-slot用于提供具名插槽或需要接收 prop 的插槽

可选择性传递参数，表示插槽名，默认值default

2.2.12 v-pre

v-pre指令用于跳过这个元素及其子元素的编译过程，例如:

可以看到里头的东西没有被编译

2.2.13 v-cloak

v-cloak指令主要用于解决插值表达式在页面闪烁问题

<div v-cloak>
  {{ message }}
</div>

[v-cloak] {
  display: none;
}

这样div只会在编译结束后显示

2.2.14 v-once

v-once指令用于表示只渲染一次，当要重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

2.2.15 v-memo 3.2+

用于缓存一个模板的子树

该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个该子树的更新会被跳过

<div v-memo="[valueA, valueB]"></div>

在重新渲染时，如果 valueA 与 valueB 都维持不变，那么对这个

以及它的所有子节点的更新都将被跳过

2.2.16 v-is

已在 3.1.0 中废弃，改用:is

<component :is="currentView"></component>

相关推荐：vue.js视频教程

The above is the detailed content of What are the components of Vue's built-in instructions?. For more information, please follow other related articles on the PHP Chinese website!