Vue3 的模板语法：指令、插值语法和其他相关特性

傷城~ 2024-03-17 21:13 88阅读 0赞

在使用 Vue3 开发应用时，我们通常使用模板来定义应用的用户界面。Vue3 的模板语法通过扩展普通 HTML，添加了一些特殊的指令和插值语法，以实现数据的动态渲染和交互。本文将详细介绍 Vue3 的模板语法，包括指令、插值语法和其他相关特性。

![e3fa38fcb685b36bf56a617512f24f92.png][]

#### 插值语法 ####

Vue3 中最基础和常用的模板语法是插值语法，它用于将数据动态地渲染到 HTML 中的文本内容或属性上。插值语法使用双花括号（`{ { }}`）将表达式包裹起来，例如：

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

上述代码中，`message` 是 Vue3 实例中的一个数据，它会被动态地渲染到 `<div>` 元素中。

除了简单的文本插值，Vue3 还支持在 HTML 属性中进行插值，例如：

上述代码中使用了 `:` 作为 `v-bind` 指令的缩写方式，将 `imageUrl` 数据的值绑定到 `src` 属性上，实现动态加载图片。

#### 指令 ####

指令是 Vue3 模板中的特殊属性，以 `v-` 开头。它们用于对 HTML 元素进行操作，并实现一些复杂的逻辑。Vue3 提供了多个内置指令，包括常用的 `v-if`、`v-for`、`v-on` 和 `v-model` 等。

*  `v-if` 指令用于根据条件判断是否渲染 HTML 元素，例如：
    
        <div v-if="isShow">条件为真时显示</div>
 *  `v-for` 指令用于循环遍历数组或对象，生成重复的 HTML 元素，例如：
    
        <ul>
          <li v-for="item in items" :key="item.id">{
             { item.name }}</li>
        </ul>
 *  `v-on` 指令用于监听 DOM 事件，并执行相应的方法，例如：
    
        <button v-on:click="handleClick">点击触发方法</button>
 *  `v-model` 指令用于实现表单元素与 Vue3 实例中的数据的双向绑定，例如：
    
        <input v-model="message" type="text">
    
    上述代码将 `message` 数据与文本输入框进行双向绑定。

此外，Vue3 还支持自定义指令，以满足特定需求。自定义指令可以用于直接操作 DOM、监听事件等。

#### 计算属性和监听器 ####

除了插值语法和指令，Vue3 还提供了计算属性和监听器，用于处理视图中的数据逻辑。

计算属性是基于已有数据衍生出的新数据，它在模板中使用方式与普通数据一样。但与普通数据不同的是，计算属性会缓存结果，在依赖数据未改变时直接返回缓存的计算结果，提高性能。

监听器是用于观察并响应数据变化的函数。当监听的数据发生变化时，监听器中定义的回调函数会被执行。

#### 条件渲染 ####

Vue3 提供了多种条件渲染的方式，包括 `v-if`、`v-else-if`、`v-else` 和 `v-show`。

*  `v-if` 和 `v-else-if` 用于根据条件判断是否渲染元素。
 *  `v-else` 用于表示前面的 `v-if` 或 `v-else-if` 不满足时需要渲染的内容。
 *  `v-show` 用于根据条件控制元素的显示和隐藏，通过修改元素的 `display` 属性实现。

#### 列表渲染 ####

列表渲染是 Vue3 模板中经常用到的功能，通过 `v-for` 指令可以循环遍历数组或对象，并生成重复的 HTML 元素。在列表渲染中，我们通常需要为每个项设置唯一的 `key`，以便 Vue3 可以识别每个项的身份并进行高效的更新。

上述代码中，`items` 是一个数组，通过 `v-for` 指令循环遍历，并生成对应的 `<li>` 元素。

#### 表单输入绑定 ####