This article brings you relevant knowledge about Vue instructions and manual encapsulation of custom instructions. I hope it will be helpful to you.
In the front-end basic interview, Vue’s instructions are considered a high-frequency interview question
The interviewer asked: What instructions does Vue have?
Just tell him: As of Vue3.2, 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 , among which v-memo is new in 3.2, v-is is abandoned in 3.1.0
If the interviewer further asks: How to encapsulate a custom instruction?
Just tell him: Custom instructions are divided into global custom instructions and local instructions; in Vue3, you can register a global custom instruction through directive() on the application instance. If you want to register a local instruction, you can Configure the directives option in the component to register local instructions
After reading this article, you will fully understand the 16 Vue instructions and master how to customize a directive
1.1 What is a Vue directive
In Vue, a directive is actually a special attribute
Vue will do something behind the scenes based on the directive. As for what to do specifically, Vue will perform different operations according to different instructions. The details will be discussed later
1.2 What are the characteristics
Vue An obvious feature of instructions is that they all start with v-, for example: v-text
<span v-text="msg"></span>
2.1 What are the built-in instructions in Vue?
Built-in instructions refer to Vue’s own instructions, which 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, among which v-memo is new in 3.2, v-is is abandoned in 3.1.0
Let’s take a look at these built-in instructions Basic usage
2.2 Understand the basic usage of the 16 built-in instructions
2.2.1 v-text
v-text is used to update the textContent of the element, for example:
<h1 v-text="msg"></h1>
The content of the h1 element ultimately depends on the value of msg
2.2.2 v-html
is very similar to v-text, except that v-html is used to update the innerHTML of the element, such as
<div v-html="'<h1>Hello LBJ</h1>'"></div>
It should be noted that the content inside must be inserted as ordinary HTML
2.2.3 v-show
v-show can be based on the true value of the expression. False value, switches the display value of the element, used to control the display and hiding of the element, for example:
It can be seen that when the conditions change, this instruction triggers display or hiding Transition effects
Note: v-show does not support the element, nor does it support v-else
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, v-if is the destruction or reconstruction of elements when switching, rather than simply Show and hide
You can see that when the expression is false, v-if directly destroys the element, 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-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 condition, otherwise displaying the elements of v-else, for example:
Note: The sibling element before v-else must have v-if or v-else-if
2.2.6 v-else-if
Similarly, the "else if block" representing v-if is the same as v-else. The previous sibling element must have v-if or v-else-if, for example:
2.2.7 v-for
v-for is a directive for iteration, which can render elements or template blocks multiple times based on source data, for example:
You can also specify an alias for the array index or the key used for the object
<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 - Call event.stopPropagation()
.prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调
.once - 只触发一次回调
.left - 只当点击鼠标左键时触发
.right - 只当点击鼠标右键时触发
.middle - 只当点击鼠标中键时触发
.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限制于：
