Vue.js 提供了简洁直观的模板语法，帮助开发者将数据与视图绑定，实现动态、交互式的页面渲染。在本篇中，我们将全面解析 Vue 的模板语法，帮助你掌握其强大功能。
什么是模板语法？
模板语法是 Vue.js 的核心特性之一，允许你在 HTML 中使用特殊的语法来绑定数据。Vue 模板语法支持以下两种主要方式：
- 文本插值：动态显示变量的值。
- 指令：在标签中动态绑定属性或事件。
文本插值
文本插值使用双大括号 {{ }} 将变量插入到 HTML 中，动态显示变量的值。例如：
<div id="app">
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
页面将显示：
Hello, Vue!
支持的表达式
在插值中可以使用 JavaScript 表达式，例如：
<p>{{ 1 + 2 }}</p> <!-- 输出 3 -->
<p>{{ message.toUpperCase() }}</p> <!-- 输出 MESSAGE -->
<p>{{ isActive ? 'Yes' : 'No' }}</p> <!-- 条件判断 -->
但需要注意，插值中不支持复杂语句，如 if 或 for。
指令语法
指令是以 v- 开头的特殊属性，用于绑定数据或响应事件。以下是常用指令的介绍：
1. v-bind：动态绑定属性
v-bind 用于绑定 HTML 属性。例如，动态绑定图片的 src 属性：
<img v-bind:src="imageUrl" alt="图片">
简写形式：
<img :src="imageUrl" alt="图片">
2. v-if 和 v-show：条件渲染
v-if：根据条件渲染元素，当条件为false时，元素不会出现在 DOM 中。
<p v-if="isVisible">我会被显示</p>
v-show：通过控制元素的display样式来显示或隐藏，但元素始终存在于 DOM 中。
<p v-show="isVisible">我会被显示</p>
3. v-for：循环渲染
使用 v-for 可以渲染一个列表。例如：
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
items 是一个数组，对应每个 item 都会生成一个 <li> 元素。
4. v-on：事件绑定
v-on 用于绑定事件监听器。例如，监听点击事件：
<button v-on:click="handleClick">点击我</button>
简写形式：
<button @click="handleClick">点击我</button>
5. v-model：双向绑定
v-model 是 Vue 的一大亮点，常用于表单控件，实现数据的双向绑定。例如：
<input v-model="inputText" placeholder="输入内容">
<p>你输入了：{{ inputText }}</p>
用户在输入框中的内容会实时更新到 inputText，并反映到页面中。
插槽（Slot）与作用域插槽
模板中还可以使用插槽来定义可复用的组件内容。以下是一个简单示例：
普通插槽：
<my-component>
<p>这是插槽中的内容。</p>
</my-component>
作用域插槽：
在组件中传递动态数据给插槽：
<my-component>
<template v-slot:default="slotProps">
<p>{{ slotProps.message }}</p>
</template>
</my-component>
过滤器
Vue 模板语法支持通过过滤器对插值内容进行格式化。例如：
<p>{{ price | currency }}</p>
定义过滤器：
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});
总结
Vue 的模板语法简化了数据与视图的交互，极大提高了开发效率。在实际项目中，合理运用模板语法可以让代码更加简洁明了。熟悉这些语法之后，你已经可以开始构建动态、交互式的前端页面了！下一篇将继续探讨 Vue 组件的使用方法，敬请期待。
