Instructions are special attributes prefixed with v-.
The value of the directive attribute is expected to be a single JavaScript expression (v-for is an exception).
The responsibility of the instruction is to act on the DOM responsively when the value of the expression changes.
table of Contents
1. v-text
Update the text content of the element, which is the textContent of the element object.
<div v-text="a"></div>
// 跟数据绑定的文本插值效果一样
<div>{
{ a }}</div>
2. v-html
The user updates the innerHTML of the element.
<div v-html="a"></div>
Note that this command is only used on trusted content, never on submitted content, otherwise it will easily lead to XSS attacks.
Single-file component If you add scoped to your style, the style will not be applied to the inserted html.
3. v-show
According to the true and false value of the expression to show and hide the elements , it is displayed and hidden through css, which has better performance than v-if.
<div v-show="a"></div>
4. v-if
The element is rendered according to the true and false value of the expression, and the element is destroyed when it is false, and the data and components inside are destroyed and rebuilt when switching.
<div v-if="a"></div>
When used with v-if, v-for has a higher priority than v-if
5. v-else
The element at the same level before this instruction must have v-if or v-else-if.
<div v-if="a"></div>
<div v-else></div>
6. v-else-if
The element at the same level before this instruction must have v-if or v-else-if.
<div v-if="a"></div>
<div v-else-if="b"></div>
<div v-else></div>
7. v-for
The value must be an array, object, number, string.
In order to give Vue a hint so that it can track the identity of each node, thereby reusing and reordering existing elements, you need to provide a unique key for each item.
7.1 Array
<div v-for="(item, index) in [1, 2, 3, 4]" :key="index">{
{item}}|{
{index}}</div>
result:
<div>1|0</div>
<div>2|1</div>
<div>3|2</div>
<div>4|3</div>
7.2 Object
<div v-for="(val, name, index) in { name: '小明', age: 18, }" :key="name">
{
{val}}|{
{name}}|{
{index}}
</div>
result:
<div>小明|name|0</div>
<div>18|age|1</div>
7.3 Number
<div v-for="(val, index) in 2" :key="index">{
{val}}|{
{index}}</div>
result:
<div>1|0</div>
<div>2|1</div>
7.4 String
<div v-for="(val, index) in '小明'" :key="index">{
{val}}|{
{index}}</div>
result:
<div>小|0</div>
<div>明|1</div>
8. v-on
Its abbreviation is @.
V-on is used to bind event listeners. On common elements, it can only listen to native dom events, such as click and change. On the custom element component, he can listen to the custom event triggered by the child component.
If you use an inline statement, the statement can access a $event property: v-on:click="handle('ok', $event)".
Modifiers:
.stop-call event.stopPropagation().
.prevent-call event.preventDefault().
.capture-Use capture mode when adding event listeners.
.self-The callback is triggered only when the event is triggered from the element itself bound to the listener.
.{keyCode | keyAlias}-The callback is only triggered when the event is triggered from a specific key.
.native-listen for native events of the root element of the component.
.once-trigger the callback only once.
.left-(2.2.0) Triggered only when the left mouse button is clicked.
.right-(2.2.0) Triggered only when the right mouse button is clicked.
.middle-(2.2.0) Triggered only when the middle mouse button is clicked.
.passive-(2.3.0) Add a listener in {passive: true} mode
<!-- 方法 -->
<div v-on:click="fun"></div>
<!-- 内联语句 -->
<div v-on:click="fun('hellp', $event)"></div>
<!-- 简写 -->
<div @click="fun"></div>
<!-- 使用修饰符 阻止冒泡 -->
<div @click.stop="fun"></div>
<!-- 串联修饰符 -->
<div @click.stop.prevent="fun"></div>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
9. v-bind
v-bind is used to bind dynamic attributes.
Its abbreviation is:.
Modifiers:
.prop-bind as a DOM property rather than as an attribute.
.camel-(2.1.0+) Convert the kebab-case attribute name to camelCase. (Supported since 2.1.0)
.sync (2.3.0+) Syntactic sugar, will be expanded into a v-on listener that updates the binding value of the parent component.
<!-- 绑定一个属性 -->
<img v-bind:src="a" />
<!-- 简写 -->
<img :src="a" />
<!-- 绑定style -->
<div :style="{
fontSize: size + 'px' }">小明</div>
<!-- 绑定class -->
<div :class="[classA, classB]"></div>
10. v-model
Used for two-way binding
modifiers on form controls :
.lazy-replace input to monitor change events.
number-input string into a valid number.
trim-input leading and trailing spaces to filter
<input v-model="msg" >
11. v-pre
Do not compile this element and its children
<div v-pre>{
{ a }}</div>
result
{
{ a }}
12. v-cloak
It is used to display the control element after compiling to solve the problem that the screen will flash.
In vue-router, it is an empty div, which is implemented by element mounting, so this instruction is not needed.
<div v-cloak>123</div>
13. v-once
Only render an element or component once, and never render it again, to optimize performance.
<div v-once>123</div>
14. v-slot
Used to provide named slots or accept props.
Its abbreviation is #.
Can only be used on the template tag.
The default value is default.
It can be understood as building blocks. This instruction tells you which building block to put in which place.