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 boxVue 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 .0Let’s learn about the basic use of these built-in instructions2.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
is very similar to v-text, except that v-html uses For updating the innerHTML of the element, for example
<div v-html="'<h1>Hello LBJ</h1>'"></div>
It should be noted that the content inside must be inserted as ordinary HTML
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 element, nor does it support v-else
2.2.4 v-ifv-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 , if the element is , its content will be extracted as a conditional block
2.2.5 v-elsev-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
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:
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
- .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>
需要注意，用在普通元素上時，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件
2.2.9 v-bind
v-bind用于綁定數(shù)據(jù)和元素屬性，可以縮寫為: 或.(當(dāng)使用 .prop 修飾符時)，比如
<div :someProperty.prop="someObject"></div> <!-- 相當(dāng)于 --> <div .someProperty="someObject"></div>
v-bind的3個修飾符
.camel - 將 kebab-case attribute 名轉(zhuǎn)換為 camelCase
.prop - 將一個綁定強(qiáng)制設(shè)置為一個 DOM property。3.2+
.attr - 將一個綁定強(qiáng)制設(shè)置為一個 DOM attribute。3.2+
2.2.10 v-model
v-model限制于：