异常教程

Vue.js 模板语法（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发中，Vue.js 作为一款轻量级框架，凭借其简洁的语法和灵活的生态，成为开发者构建用户界面的热门选择。其核心之一便是 模板语法，它通过直观的 HTML 扩展方式，让开发者能够高效地将数据与视图进行绑定。无论是编程初学者还是中级开发者，掌握 Vue.js 的模板语法，都能显著提升开发效率，并为后续学习组件化开发、状态管理等进阶内容打下基础。

本文将从零开始，以循序渐进的方式讲解 Vue.js 的模板语法，涵盖基础语法、指令、表达式、事件处理等核心知识点，并通过实际案例演示其应用场景，帮助读者快速上手并深入理解这一技术。

一、模板语法基础：数据绑定与文本插值

1.1 文本插值（Text Interpolation）

Vue.js 的模板语法中最直观的特性是文本插值，通过双花括号 {{ }} 将数据动态渲染到 HTML 元素中。这类似于将数据“快递”到页面的指定位置，开发者只需在模板中声明变量名，Vue 会自动将其与组件的数据源关联。

示例代码：

<template>
  <div>
    <p>当前时间：{{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString()
    };
  }
};
</script>

在上述代码中，{{ currentTime }} 会实时显示 data 中的 currentTime 值。若数据更新，视图会自动同步刷新，这就是 Vue 的响应式系统在底层工作的体现。

1.2 内联 HTML 渲染

除了文本插值，Vue 还支持通过 v-html 指令直接渲染 HTML 内容。但需注意，此操作可能引入 XSS（跨站脚本攻击）风险，因此仅在信任数据来源时使用。

示例代码：

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

<script>
export default {
  data() {
    return {
      dynamicHTML: "<strong>这段文字会以加粗显示</strong>"
    };
  }
};
</script>

二、指令：Vue.js 的“交通信号灯”

指令是 Vue 模板语法的核心功能之一，它们以 v- 开头，类似于 HTML 的属性，但具有特殊含义。指令的作用是告诉 Vue 如何操作 DOM，例如条件渲染、循环列表或绑定事件。

2.1 条件渲染指令 v-if 和 v-show

  • v-if：根据条件判断是否渲染元素。类似 JavaScript 的 if 语句，当条件为 false 时，元素会被完全移出 DOM 树。
  • v-show：通过 CSS 的 display 属性控制元素的可见性，无论条件如何，元素始终存在于 DOM 中。

对比表格：
| 指令 | 渲染机制 | 性能特点 |
|--------|----------------------------|----------------------------|
| v-if | 动态增删 DOM 元素 | 切换频繁时性能较差 |
| v-show | 通过 CSS 控制可见性 | 切换时仅修改 CSS 属性 |

示例代码：

<template>
  <div>
    <p v-if="isDisplayed">这是一个条件渲染的段落</p>
    <p v-show="isDisplayed">这是一个通过 CSS 控制的段落</p>
  </div>
</template>

2.2 列表渲染指令 v-for

v-for 指令用于循环渲染数组或对象，是构建动态列表的关键工具。其语法为 v-for="(item, index) in items"，其中 items 是数据源，item 是当前项，index 是索引。

示例代码：

<template>
  <ul>
    <li v-for="(fruit, index) in fruits" :key="index">
      {{ index + 1 }}. {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ["苹果", "香蕉", "橙子"]
    };
  }
};
</script>

三、表达式与运算符：模板中的“小型计算器”

Vue 的模板语法允许在 {{ }} 或指令中直接使用表达式，例如执行简单运算、调用方法或访问对象属性。但需注意，复杂逻辑应放在 JavaScript 方法中，以保持模板简洁。

3.1 基础表达式

{{ message.split('').reverse().join('') }}  <!-- 反转字符串 -->
{{ count > 5 ? '数量过多' : '正常' }}        <!-- 三元运算符 -->

3.2 过滤器（已废弃）

Vue 2.x 中支持过滤器（如 {{ message | capitalize }}），但 Vue 3 已移除此功能，推荐改用计算属性或方法替代。

四、事件处理：与用户交互的桥梁

通过 v-on 指令（或简写 @）绑定事件监听器，Vue 可以响应用户的操作，例如点击、输入等。

4.1 基础事件绑定

<button @click="incrementCount">点击增加计数</button>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count += 1;
    }
  }
};
</script>

4.2 事件修饰符

Vue 提供了多个事件修饰符，简化常见操作：

  • .prevent：阻止表单提交的默认行为。
  • .stop：阻止事件冒泡。
  • .once：确保事件仅触发一次。

示例代码：

<form @submit.prevent="submitForm">
  <!-- 表单内容 -->
</form>

五、组件通信：模板语法的“接力赛”

在 Vue 中，组件是可复用的模块化单元。模板语法支持通过 props 和 v-model 实现父子组件之间的数据传递。

5.1 单向数据流 props

父组件通过 props 向子组件传递数据，子组件无法直接修改 props 的值，需通过事件 $emit 通知父组件更新。

示例代码：

<!-- 父组件 -->
<child-component :initial-value="parentData" @update-value="handleUpdate" />

<!-- 子组件 -->
<template>
  <input :value="initialValue" @input="$emit('update-value', $event.target.value)">
</template>

<script>
export default {
  props: {
    initialValue: String
  }
};
</script>

5.2 双向绑定 v-model

v-model 是 props 和事件的语法糖，简化表单元素的双向绑定。

<input v-model="message">
<!-- 等价于： -->
<input :value="message" @input="message = $event.target.value">

六、实战案例：构建动态待办事项列表

6.1 需求分析

实现一个包含以下功能的待办事项列表：

  1. 添加新任务。
  2. 显示任务列表并支持删除。
  3. 标记任务为“已完成”。

6.2 代码实现

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask">
    <button @click="addTask">添加</button>

    <ul>
      <li v-for="(task, index) in tasks" :key="task.id">
        <input type="checkbox" v-model="task.completed">
        <span :class="{ 'completed': task.completed }">{{ task.text }}</span>
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: "",
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          id: Date.now(),
          text: this.newTask,
          completed: false
        });
        this.newTask = "";
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: #888;
}
</style>

6.3 关键点解析

  • v-for 循环：遍历 tasks 数组，生成动态列表项。
  • v-model 双向绑定：同步输入框与 newTask 变量。
  • 条件样式 completed：通过计算属性动态添加 CSS 类。

结论

Vue.js 的模板语法通过简洁的语法糖和指令系统，大幅降低了视图与数据交互的复杂度。从基础的文本插值到高级的组件通信，开发者能够以“声明式”思维构建动态界面。掌握本文讲解的指令（如 v-if、v-for）、事件绑定和表达式，是成为 Vue 开发者的必备技能。

对于初学者，建议从简单案例入手，逐步结合官方文档和实践加深理解；中级开发者则可探索更复杂的场景，如异步数据渲染或组件通信优化。通过持续练习与项目实践，Vue.js 的模板语法将成为你构建现代化前端应用的得力工具。

（全文约 1800 字）

最新发布

查看更多文章