---

前言

👨‍💻👨‍🌾📝记录学习成果，以便温故而知新

“VUE3照本宣科”是指照着中文官网和菜鸟教程这两个“本”来学习一下VUE3。以前也学过VUE2，当时只再gitee留下一些代码，却没有记录学习的心得体会，有时也免不了会追忆一下。

以后出现“中文官网”不做特殊说明就是指：https://cn.vuejs.org/；菜鸟教程就是指：https://www.runoob.com/vue3/vue3-tutorial.html

---

一、内置指令

之所把内置指令一一罗列，主要是因为几个指令的缩写老是记不住，所以这里加深一下印象，做个备忘。同时也是作为基础知识的一部分。

1.v-text

更新元素的文本内容。

演示代码：

const msg = ref('Hello Tom')

<div>
	 <span v-text="msg"></span>
</div>

<div>
   <!-- 等同于 -->
   <span>{{ msg }}</span>
</div>

运行效果：
如果是用双大括号输出，可以接受表达式。

2.v-html

更新元素的 innerHTML。
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。

演示代码：

const html = ref('<h1>{{ msg }}</h1>')

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

运行效果：

3.v-show

基于表达式值的真假性，来改变元素的可见性。

演示代码：

const ok = ref(true)

<div v-show="ok">v-show</div>
<div><button @click="ok=!ok">{{ ok ? '隐藏' : '显示' }}</button></div>

运行效果：
如果单击“隐藏”按钮，则隐藏v-show指令所在的div，如图：
v-show指令只是隐藏div，并不删除div，这点与v-if不一样。下图能够说明v-show指令所在的div被设置了style=“display: none;”

4.v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。
当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令

5.v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。

6.v-else-if

表示 v-if 的“else if 块”。可以进行链式调用。

v-if 、v-else 与v-else-if 演示代码：

<div v-if="Math.random() > 0.5">
 Now you see me
</div>
<div v-else>
  Now you don't
</div>

<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>

运行效果：

7.v-for

基于原始数据多次渲染元素或模板块。
期望的绑定值类型：Array | Object | number | string | Iterable

演示代码：

const items = reactive([1, 2, 3, 4, 5])

const user = ref({
  'name': 'Tom',
  'age': 16
})

<div v-for="(item, index) in items" :key="index">{{ index }} - {{ item }}</div>
<div v-for="(value, key) in user" :key="key">{{ key }} - {{ value }}</div>
<div v-for="(value, name, index) in user" :key="index">{{ index }} - {{ name }} - {{ value }}</div>

运行效果：

这里由于eslint的原因，以上代码的没有报错，还有其它的写法，但是报错了，所以就没有展示。

8.v-on

给元素绑定事件监听器。
缩写：@
参数：event (使用对象语法则为可选项)

修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 在捕获模式添加事件监听器。
• .self - 只有事件从元素本身发出才触发处理函数。
• .{keyAlias} - 只在某些按键下触发处理函数。
• .once - 最多触发一次处理函数。
• .left - 只在鼠标左键事件触发处理函数。
• .right - 只在鼠标右键事件触发处理函数。
• .middle - 只在鼠标中键事件触发处理函数。
• .passive - 通过 { passive: true } 附加一个 DOM 事件。

演示代码：

const doThis = (e) => console.log(e)

const doThat = (e) => console.log(e)

const onEnter = (e) => console.log(e)

const event = ref('click')

<!-- 方法处理函数 -->
<div><button v-on:click="doThis">v-on:click</button></div>

<!-- 动态事件 -->
<div><button v-on:[event]="doThis">v-on:[event]</button></div>

<!-- 内联声明 -->
<div><button v-on:click="doThat('hello', $event)">v-on:click</button></div>

<!-- 缩写 -->
<div><button @click="doThis">@click</button></div>

<!-- 使用缩写的动态事件 -->
<div><button @[event]="doThis">@[event]</button></div>

<!-- 停止传播 -->
<div><button @click.stop="doThis">@click.stop</button></div>

<!-- 阻止默认事件 -->
<div><button @click.prevent="doThis">@click.prevent</button></div>

<!-- 不带表达式地阻止默认事件 -->
<div><form @submit.prevent>@submit.prevent</form></div>

<!-- 链式调用修饰符 -->
<div><button @click.stop.prevent="doThis">@click.stop.prevent</button></div>

<!-- 按键用于 keyAlias 修饰符-->
<div><input @keyup.enter="onEnter" /></div>

<!-- 点击事件将最多触发一次 -->
<div><button v-on:click.once="doThis">v-on:click.once</button></div>

<!-- 对象语法 -->
<div><button v-on="{ mousedown: doThis, mouseup: doThat }">v-on=</button></div>

运行效果：
挨个点击按钮或者输入框里输入回车，终端输出如图：
除了form没有效果以外，其它都有输出。

9.v-bind

动态的绑定一个或多个 attribute，也可以是组件的 prop。
缩写：: 或者 . (当使用 .prop 修饰符)

修饰符

• .camel - 将短横线命名的 attribute 转变为驼峰式命名。
• .prop - 强制绑定为 DOM property。
• .attr - 强制绑定为 DOM attribute。

演示代码：

const imageSrc = ref('../../public/nutcracker.jpg')

const fileName = ref('nutcracker.jpg')

const key = ref('style')
const value = ref('color:blue;text-align:center')

const isRed = ref(true)

const classA = ref('classA')
const classB = ref('classB')
// eslint-disable-next-line no-unused-vars
const classC = ref('classC')

const isB = ref(true)
const isC = ref(true)

const size = ref(20)

const styleObjectA = reactive({ color: 'red' })
const styleObjectB = reactive({ fontSize: '20px' })

const someProp = ref('someProp')

<div>
<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" style="width:100px;height:100px;" />
</div>

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

<div>
<!-- 缩写 -->
<img :src="imageSrc" style="width:100px;height:100px;"/>
</div>

<div>
<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value">:[key]="value"</button>
</div>

<div>
<!-- 内联字符串拼接 -->
<img :src="'../../public/' + fileName" style="width:100px;height:100px;" />
</div>

<!-- class 绑定 -->
<div :class="{ red:isRed }">:class="{ red:isRed }"</div>
<div :class="[classA, classB]">:class="[classA, classB]"</div>
<div :class="[classA, { classB:isB, classC:isC }]">:class="[classA, { classB: isB, classC: isC }]"</div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }">:style="{ fontSize: size + 'px' }"</div>
<div :style="[styleObjectA, styleObjectB]">:style="[styleObjectA, styleObjectB]"</div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'style': styleObjectB }">v-bind="{ id: someProp, 'style': styleObjectB }"</div>

.red {
  color: red;
}

.classA {
  color: yellow;
}

.classB {
  font-size: 20px;
}

.classC {
  text-decoration: underline;
}

运行效果：
截图中两个按钮绑定了样式，所以文字成了蓝色。

10.v-model

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

演示代码：

const color = ref('红')
const colors = ref([])

<div><input type="text" v-model="color" /></div>
<div>
  <input type="radio" id="red1" v-model="color" value="红"/><label for="red1">红</label>
  <input type="radio" id="yellow1" v-model="color" value="黄"/><label for="yellow1">黄</label>
  <input type="radio" id="blue1" v-model="color" value="蓝"/><label for="blue1">蓝</label>
</div>
<div>
  <select v-model="color">
    <option value="红">红</option>
    <option value="黄">黄</option>
    <option value="蓝">蓝</option>
  </select>
</div>
<br>
<div><textarea v-model="colors"></textarea></div>
<div>
  <input type="checkbox" id="red2" v-model="colors" value="红"/><label for="red2">红</label>
  <input type="checkbox" id="yellow2" v-model="colors" value="黄"/><label for="yellow2">黄</label>
  <input type="checkbox" id="blue2" v-model="colors" value="蓝"/><label for="blue2">蓝</label>
</div>

运行效果：

代码实现了文本框、单选按钮、下拉框、文本域与复选框的双向绑定。

11.v-slot

用于声明具名插槽或是期望接收 props 的作用域插槽。
缩写：#

这个指令在后面介绍。

12.v-pre

跳过该元素及其所有子元素的编译。

演示代码：

<span v-pre>{{ this will not be compiled }}</span>

运行效果：

13.v-once

仅渲染元素和组件一次，并跳过之后的更新。

演示代码：

const onceMsg = ref('Hello Jerry')

<div><span v-once>This will never change: {{ onceMsg }}</span></div>
<div><span>This will change: {{ onceMsg }}</span></div>
<div><input v-model="onceMsg" /></div>

运行效果：
加了v-once指令的div果然只渲染了一次，修改文本框并没有更新。

14.v-memo

缓存一个模板的子树。在元素和组件上都可以使用。

中文文档中说：

v-memo 仅用于性能至上场景中的微小优化，应该很少需要。

所以就不介绍了。

15.v-cloak

用于隐藏尚未完成编译的 DOM 模板。

该指令只在没有构建步骤的环境下需要使用。

演示代码：

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

这个代码只在特定场景或特定情况下才能看到效果。

二、自定义指令

本地的自定义指令在 <script setup> 中不需要显式注册，但他们必须遵循 vNameOfDirective 这样的命名规范。

演示代码：

const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
    el.style.color = '#FF0000'
    console.log(el)
  }
}

<h1 v-my-directive>This is a Heading</h1>

运行效果如图：

自定义指令已经起到了作用，因为颜色已经变成了红色。

三、插槽

1.v-slot

定义带插槽子组件TestChild3.vue，代码如下：

<template>
  <div>
    <div><slot>default</slot></div>
    <div><slot name="header">header</slot></div>
    <div><slot name="footer">footer</slot></div>
  </div>
</template>

引用子组件代码：

import Child from '/src/components/TestChild3.vue'

<Child></Child>
<br>
<Child>默认</Child>
<br>
<Child>
  <template v-slot:header>引用header</template>
</Child>
<br>
<Child>
  <template v-slot:default>引用default</template>
  <template v-slot:header>引用header</template>
  <template v-slot:footer>引用footer</template>
</Child>

运行结果：

2.useSlots

在子组件TestChild3.vue添加如下代码：

<script setup>
import { useSlots, onMounted } from 'vue'

const slots = useSlots()//能获取到this的情况下，也可以使用this.$slots

onMounted(() => {
  console.log(slots)
})
</script>

终端输出如图：

3.defineSlots()

中文文档中说：

这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。
它还返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。

目前发现貌似不是lang="ts"是用不起来的。要是以后发现不是lang="ts"也能用再来介绍。