Vue 3第三章：模板语法及指令介绍_vue3 template详解

1. 插值表达式

1.1. 声明变量可直接在模板中使用，采用{{变量名称}}的方式

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref("hello");
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10

1.2. 模板语法支持三元表达式

<template>
  <div>{{ message ? 1 : 0 }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref(false);
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10

1.3. 模板语法支持运算

template>
  <div>{{ message + 1 }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref(1);
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10

1.4. 模板语法支持方法调用

<template>
  <div>{{ getName() }}</div>
</template>

<script setup lang="ts">
const getName = () => {
  console.log('张三');
}
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11

2. 指令

在 Vue中，指令（Directive）是一种带有前缀 v- 的特殊属性，可以被绑定到普通的 HTML 元素上，用于改变元素的行为或样式。

• 常用的内置指令如下：
  

2.1. v-bind：用于绑定属性或动态绑定对象的值到元素上。

<!-- 绑定普通属性 -->
<div v-bind:class="{'active': isActive}"></div>

<!-- 绑定组件属性 -->
<my-component v-bind:prop-name="value"></my-component>

1
2
3
4
5
6

在 Vue 3 中，可以使用缩写形式:替代 v-bind:。

<!-- v-bind 缩写 -->
<div :class="{'active': isActive}"></div>
1
2

2.2. v-if、v-else-if、v-else 和 v-show：用于控制元素是否显示或隐藏。

<!-- v-if 指令 -->
<div v-if="isNum === 0">Hello v-if!</div>

<!-- v-else-if 指令 -->
<div v-else-if="isNum === 1">Hello v-else-if!</div>

<!-- v-else 指令 -->
<div v-else>Hello v-else!</div>

<!-- v-show 指令 -->
<div v-show="isShow">Hello v-show!</div>

1
2
3
4
5
6
7
8
9
10
11
12

在 Vue 3 中，v-if 和 v-show 的行为和使用方法与 Vue 2 相同。

2.3. v-for：用于循环渲染数组或对象。

<!-- 渲染数组 -->
<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

<!-- 渲染对象 -->
<ul>
  <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>
1
2
3
4
5
6
7
8
9

在 Vue 3 中，可以使用新的语法糖 v-for 来循环渲染整数区间。

<!-- 循环渲染整数区间 -->
<div v-for="i in 10" :key="i">{{ i }}</div>


1
2
3
4

2.4. v-model：用于在表单元素和组件中双向绑定数据。

<!-- 绑定普通表单元素 -->
<input type="text" v-model="message">

<!-- 绑定自定义组件 -->
<my-component v-model="value"></my-component>

1
2
3
4
5
6

在 Vue 3 中，可以通过传递 modelValue 和 update:modelValue 属性来自定义 v-model 在组件中的行为。

<!-- 自定义组件的 v-model -->
<my-component v-model:value="value"></my-component>

1
2
3

2.5. v-on：用于绑定事件监听器。

<!-- 绑定普通事件 -->
<button v-on:click="handleClick">Click me!</button>

<!-- 绑定修饰符 -->
<button v-on:keyup.enter="handleEnter">Press Enter!</button>

1
2
3
4
5
6

在 Vue 3 中，可以使用缩写形式 @ 替代 v-on:。

<!-- v-on 缩写 -->
<button @click="handleClick">Click me!</button>
1
2

2.6. v-html：用于渲染包含 HTML 代码的字符串。

<!-- 渲染包含 HTML 代码的字符串 -->
<div v-html="htmlCode"></div>

1
2
3

注意：使用 v-html 指令可以直接将字符串中的 HTML 代码渲染到页面中。但需要注意的是，由于可以注入恶意脚本导致安全问题，因此应该尽量避免直接使用 v-html 指令渲染未经信任的 HTML 代码。

2.7. v-text：用于渲染纯文本内容。

<!-- 渲染纯文本内容 -->
<div v-text="text"></div>

1
2
3

使用 v-text 指令可以将指定的文本内容渲染到页面中，与 {{}} 插值表达式相比，v-text 可以避免潜在的 XSS（跨站脚本攻击）攻击。

2.8. v-slot：用于在父组件中定义插槽，在子组件中使用插槽内容。

<!-- 父组件中定义插槽 -->
<template>
  <child-component>
    <template v-slot:header>
      <h2>这是标题</h2>
    </template>
    <template v-slot:default>
      <p>这是正文</p>
    </template>
  </child-component>
</template>

<!-- 子组件中使用插槽内容 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用 v-slot 指令可以在父组件中定义插槽，然后在子组件中使用插槽内容。v-slot 指令还可以简化为 # 符号的缩写形式。

<!-- 使用 # 符号的缩写形式 -->
<template v-slot:header>
  <h2>这是标题</h2>
</template>

<template #header>
  <h2>这是标题</h2>
</template>

1
2
3
4
5
6
7
8
9

2.9. v-pre：用于跳过指定元素及其子元素的编译过程。

<!-- 跳过编译过程, 此处并不会将messag当成一个变量渲染出来，最终页面展示的是{{ meaage }} -->
<template>
  <div v-pre>{{ message }}</div> 
</template>

<script setup lang="ts">
import { ref } from 'vue';
let message = ref('hello')
</script>

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12

使用 v-pre 指令可以跳过指定元素及其子元素的编译过程，直接将指定内容渲染到页面中。该指令可用于优化大量静态内容的渲染性能。

2.10. v-cloak：用于防止页面闪烁。

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

<!-- 防止页面闪烁 -->
<style>
  [v-cloak] {
    display: none;
  }
</style>

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

1
2
3
4
5
6
7
8
9

使用 v-cloak 指令会在 Vue 实例编译完毕前保持元素隐藏，等到 Vue 实例准备就绪后再移除该指令。本质是通过display: none; 和display: block;实现的

2.11. v-once ：让元素及其子元素只渲染一次。该指令的作用是将元素的内容渲染为静态内容，即使后续数据发生了变化，也不会重新渲染该元素。

<!-- 只渲染一次 -->
<div v-once>{{ message }}</div>

1
2
3

使用 v-once 指令可以将指定元素及其子元素渲染为静态内容，即使后续数据发生了变化，也不会重新渲染该元素。该指令可用于优化大量静态内容的渲染性能。
注意：由于使用 v-once 指令会将元素及其子元素渲染为静态内容，因此如果后续数据发生了变化，就无法更新该元素。因此，需要在使用 v-once 指令时慎重考虑。

2.12. v-memo：大数据量场景下优化小部分性能

vue3.2新增指令，在组件和元素都可以使用，主要是可以缓存 期望的类型是个数组any[]，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么他的更新将会被跳过，甚至虚拟 DOM 的 vnode 创建也将被跳过，提升了性能。

官方文档关于v-memo的介绍

注意：v-memo 传入空依赖数组 (v-memo=“[]”) 将与 v-once 效果相同。

• 与 v-for 一起使用
• v-memo 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)

总结：本篇文章主要介绍了vue 3 中的模板语法及内置指令的常用场景。