【Vue.js基础教程】第3章 - Vue.js 模板语法详解：从 Mustache 到指令的全解析

【Vue.js基础教程】第3章 - Vue.js 模板语法详解：从 Mustache 到指令的全解析

欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中

标签：#Vue模板语法 #Mustache #v-bind #动态参数

在这里插入图片描述

最近在项目中遇到了一些 Vue.js 模板语法的“小问题”，比如数据没绑定上、动态事件没生效。当时心想：“Vue 模板语法不是很简单吗？为什么我会出错？”于是花了点时间复盘，结果发现——模板语法看似简单，细节还真不少。

今天，我想结合自己的理解，给你梳理一下 Vue.js 的模板语法。看完你可能会有一种“原来如此”的感觉。

为什么要关注模板语法？

Vue.js 的模板语法，是基于 HTML 的声明式绑定方式，能让我们轻松把数据“粘”到页面上。模板语法的三大特点：

1. 简单直观：用少量代码就能实现 DOM 操作。
2. 响应式更新：数据一变，DOM 自动更新。
3. 支持 JS 表达式：比如直接用三元运算符切换状态。

一句话：模板语法让代码更好写、更好维护。接下来，我带你从几个核心点逐步剖析。

在这里插入图片描述

核心概念

插值

文本插值

文本插值是模板语法的“入门动作”，用的是 Mustache 语法 (双大括号 {{ }})：

<span>Message: {{ msg }}</span>

当 msg 的值改变时，页面上的内容也会跟着变。简单吧？

但如果你确定某些内容不会变，可以用 v-once 提高性能：

<span v-once>这个内容不会更新: {{ msg }}</span>

原始 HTML 插值

有时需要渲染用户输入的 HTML，比如：

<p v-html="rawHtml"></p>

注意：动态渲染 HTML 有 XSS 风险，内容必须可信！

属性绑定

绑定 HTML 属性时，{{ }} 插值无效，需要用 v-bind：

<div v-bind:id="dynamicId"></div>

可以写得更简洁：

<div :id="dynamicId"></div>

布尔属性的处理

布尔属性（如 disabled）在值为 false 或 null 时，DOM 中会移除对应属性：

<button :disabled="isDisabled">按钮</button>

isDisabled 为 false 时，<button> 标签不会有 disabled 属性。

动态参数

动态参数可以让属性名或事件名根据表达式变化：

<a v-bind:[attrName]="url">...</a>
<a v-on:[eventName]="handleEvent">...</a>

如果 attrName 是 href，最终会变成：

<a href="url"></a>

动态参数的限制

动态参数只能是字符串，不能有空格或特殊字符：

<!-- 会报错 -->
<a v-bind:['foo' + bar]="value">...</a>

可以用计算属性避免这种问题。

指令

Vue 的指令用 v- 开头，比如：

v-if 条件渲染

控制 DOM 节点是否存在：

<p v-if="seen">现在你看到我了</p>

v-for 列表渲染

渲染一组数据：

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

v-on 事件监听

绑定事件：

<button v-on:click="handleClick">点击我</button>

也可以写成简写形式：

<button @click="handleClick">点击我</button>

修饰符

指令支持修饰符增强功能，比如 .prevent 阻止默认事件：

<form @submit.prevent="handleSubmit">...</form>

写在最后

Vue 模板语法是前端开发的“利器”，理解这些细节能让代码更加优雅。在项目中，我总结了几个实用建议：

1. 优先使用缩写：: 和 @ 看着更清爽。
2. 动态 HTML 谨慎用：确保内容安全。
3. 动态参数别太复杂：尽量用计算属性处理。

希望我的分享对你有帮助！如果你对模板语法还有疑问，欢迎评论交流～