二、Vue3基础[内置指令]

一、内置指令

1.v-text

解释：同v-html相对，内容只会以纯文本内容展示

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

2.v-html

解释：同v-text相对，内容会被html语法解析

注意：在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。想要使用到需要style是全局样式，不加scoped

<div v-html="html"></div>

3.v-show

解释：让元素隐藏，即仅切换了该元素上名为 display 的 CSS 属性

<h1 v-show="ok">Hello!</h1>

4.v-if

解释：同if语法一样，只会为true时，其才会渲染

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

5.v-for

解释：循环
注意：v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名；要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示（默认方式是尝试就地更新元素而不移动它们）

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

6.v-on

简写：@

常用事件：click

修饰符(<button @click.stop="doThis"></button>)：

• .stop 是阻止冒泡行为不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件；其他向上冒泡的元素全部不会触发,从自身开始不向外部发射冒泡信号
• .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
• .self 是只有是自己触发的自己才会执行,其只会阻止在自己身上冒泡；只响应当前元素自身触发的事件，并不会阻止冒泡继续向外部触发
• .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
• .once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
• .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

解释：绑定事件（里面一般绑定函数）

<button v-on:click="doThis"></button>
<!-- 简写 -->
<button @click="doThis"></button>

7.v-bind

解释：同上一篇内容，绑定属性之类

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

8.v-model

解释：在表单输入元素或组件上创建双向绑定

使用范围仅限：<input> <select> <textarea> components

修饰符：

• .lazy：v-model 会在每次 input 事件（一输入就响应）后更新数据，加 lazy 修饰符来改为在每次 change 事件（输入完毕后响应）后更新数据
• .number：让用户输入自动转换为数字
• .trim：移除输入内容两端空格

<input v-model.lazy="msg" />
<input v-model.number="age" />
<input v-model.trim="msg" />

9.v-slot

解释：用于声明具名插槽或是期望接收 props 的作用域插槽，之后介绍插槽

10.v-pre

解释：内容不被vue编译

<span v-pre>{{ this will not be compiled }}</span>
// 还是显示{{ this will not be compiled }}

11.v-once

解释：只渲染一次，之后的值不会再更新，之后就被当作静态代码

<span v-once>This will never change: {{msg}}</span>

12.v-cloak

解释：用于隐藏尚未完成编译的 DOM 模板。这个问题在单独写html里面导入vue时才能用到，也就是上篇文章1.1 普通那种情况；使用webpack打包或者热加载的没有这种问题

// 添加上css样式
[v-cloak] {
  display: none;
}

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