Vue 的模板语法有哪些？

推荐答案

Vue 的模板语法主要包括以下几种：

1. 插值：使用双大括号 {{ }} 进行文本插值。
2. 指令：以 v- 开头的特殊属性，如 v-bind、v-model、v-for 等。
3. 事件绑定：使用 v-on 或 @ 符号绑定事件。
4. 条件渲染：使用 v-if、v-else-if、v-else 进行条件渲染。
5. 列表渲染：使用 v-for 进行列表渲染。
6. 计算属性和侦听器：使用 computed 和 watch 来处理复杂的逻辑。
7. Class 和 Style 绑定：使用 v-bind 或 : 符号动态绑定 class 和 style。
8. 表单输入绑定：使用 v-model 实现表单输入的双向绑定。

本题详细解读

1. 插值

插值是 Vue 模板语法中最基础的部分，用于将数据绑定到 DOM 元素中。例如：

<p>{{ message }}</p>

在这个例子中，message 是 Vue 实例中的一个数据属性，它的值会被渲染到 <p> 标签中。

2. 指令

指令是 Vue 模板语法中的核心部分，用于在 DOM 元素上应用特殊的行为。常见的指令包括：

• v-bind：动态绑定属性，例如 v-bind:class 或 :class。
• v-model：实现表单元素的双向绑定。
• v-for：用于渲染列表，例如 v-for="item in items"。

3. 事件绑定

事件绑定用于监听 DOM 事件，并在事件触发时执行相应的 JavaScript 代码。例如：

<button @click="handleClick">Click me</button>

在这个例子中，handleClick 是 Vue 实例中的一个方法，当按钮被点击时，该方法会被调用。

4. 条件渲染

条件渲染用于根据条件决定是否渲染某个元素。例如：

<div v-if="isVisible">Visible</div>
<div v-else>Not Visible</div>

在这个例子中，isVisible 是一个布尔值，当它为 true 时，第一个 <div> 会被渲染，否则渲染第二个 <div>。

5. 列表渲染

列表渲染用于渲染一个数组或对象的内容。例如：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

在这个例子中，items 是一个数组，v-for 会遍历数组中的每个元素，并为每个元素生成一个 <li> 标签。

6. 计算属性和侦听器

计算属性和侦听器用于处理复杂的逻辑。计算属性是基于它们的依赖进行缓存的，而侦听器则用于观察和响应 Vue 实例上的数据变动。

-- -------------------- ---- -------
--------- -
  ---------- -
    ------ -------------- - - - - --------------
  -
--
------ -
  ----------------- -
    ------------------ ---- ------- ----- --------
  -
-

7. Class 和 Style 绑定

Class 和 Style 绑定用于动态地绑定 HTML 元素的 class 和 style 属性。例如：

<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>

在这个例子中，isActive 和 textColor 是 Vue 实例中的数据属性，它们的值会动态地应用到 class 和 style 属性上。

8. 表单输入绑定

表单输入绑定用于实现表单元素的双向绑定。例如：

<input v-model="message" placeholder="Enter a message">

在这个例子中，message 是 Vue 实例中的一个数据属性，输入框的值会与 message 保持同步。