PiliPlus：重新定义你的B站视频体验，解锁流畅播放与个性化定制
2025/12/23 10:10:48
文章目录
- 🎯 1.3 模板语法
- ✅ 1.3.1 效果展示
- 🔍 1.3.2 模板的理解
- 📌 1.3.3 插值语法（Interpolation）
- 功能
- 语法格式
- 示例
- ⚙️ 1.3.4 指令语法（Directives）
- 功能
- 常见指令：`v-bind`
- 作用
- 语法
- 示例
- 🧠 小结：Vue 模板语法对比
- 📚 总结
- 💡 温馨提示
在学习 Vue.js 的过程中，模板语法是构建动态用户界面的核心基础。Vue 通过简洁而强大的模板语法，将 HTML 与 JavaScript 表达式无缝结合，实现数据的动态绑定和视图的自动更新。本文将围绕 Vue 的两大核心模板语法——插值语法和指令语法进行深入解析，并结合实际示例帮助你快速掌握其用法。
🎯 1.3 模板语法
Vue 的模板语法允许我们在 HTML 中嵌入 JavaScript 表达式，从而实现数据驱动的视图渲染。整个模板系统分为两类基本语法：
- 插值语法（双大括号表达式）
- 指令语法（以
v-开头）
下面我们将逐一讲解它们的功能、写法及应用场景。
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>模板语法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- Vue模板语法有2大类： 1. 插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2. 指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）。 例如：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。 备注：Vue中有很的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。 --> <!-- 准备好一个容器--> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr/> <h1>指令语法</h1> <a v-bind:href="school.URL" v-bind:x="hello">点我去{{school.name}}学习1</a> <a :href="school.URL" :x="hello">点我去{{school.name}}学习2</a> </div> <script type="text/javascript"> // 关闭生产环境提示 Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。 new Vue({el:'#root', data:{name:'Jack', hello:'你好', school:{URL:'http://www.atguigu.com',name:'尚硅谷'}}})</script> </body> </html>✅ 1.3.1 效果展示
先来看一个完整的示例运行效果：
这个页面展示了：
- 使用
{{name}}动态显示姓名； - 使用
v-bind:href绑定链接地址，实现动态跳转。
🔍 1.3.2 模板的理解
Vue 的模板本质是在 HTML 中“嵌入”了 JS 表达式。这些表达式可以被 Vue 引擎解析并绑定到组件的数据上，当数据变化时，视图也会自动更新。
💡关键思想：数据驱动视图，而不是手动操作 DOM。
HTML 中包含 JS 代码的方式主要有两种：
| 类型 | 特征 |
|---|---|
| 插值语法 | 双大括号{{xxx}} |
| 指令语法 | 以v-开头，如v-bind |
📌 1.3.3 插值语法（Interpolation）
功能
用于解析并显示标签体中的内容，即把数据插入到 HTML 文本中。
语法格式
{{ xxx }}其中xxx是一个合法的 JavaScript 表达式，可以直接访问data中的属性。
示例
<h3>你好，{{ name }}</h3>在 Vue 实例中定义了：
data:{name:'Jack'}最终渲染结果为：
<h3>你好，Jack</h3>✅ 支持复杂表达式，例如：
{{ firstName + ' ' + lastName }}或{{ age > 18 ? '成人' : '未成年' }}
⚙️ 1.3.4 指令语法（Directives）
功能
用于解析标签的各种部分，包括：
- 标签属性（如
href,class,style） - 标签体内容（类似插值，但更灵活）
- 绑定事件（如点击、输入等）
所有指令都以v-开头，常见的有：
v-bindv-modelv-ifv-forv-on
常见指令：v-bind
作用
动态绑定 HTML 属性。
语法
v-bind:属性名 = "表达式"或简写形式：
:属性名 = "表达式"示例
<av-bind:href="school.URL">点我去{{school.name}}学习1</a><a:href="school.URL":x="hello">点我去{{school.name}}学习2</a>在data中定义：
school:{URL:'http://www.atguigu.com',name:'尚硅谷'},hello:'你好'渲染后变为：
<ahref="http://www.atguigu.com">点我去尚硅谷学习1</a><ahref="http://www.atguigu.com"x="你好">点我去尚硅谷学习2</a>🔁 注意：
v-bind会将表达式作为 JS 表达式进行求值，因此可以使用变量、方法调用甚至计算属性。
🧠 小结：Vue 模板语法对比
| 项目 | 插值语法 | 指令语法 |
|---|---|---|
| 格式 | {{ xxx }} | v-bind:attr="xxx"或:attr="xxx" |
| 使用场景 | 显示文本内容 | 绑定属性、事件、条件渲染等 |
| 是否支持属性 | ❌ 不支持 | ✅ 支持 |
| 是否可响应 | ✅ 可响应数据变化 | ✅ 可响应数据变化 |
📚 总结
Vue 的模板语法设计简洁而强大，让开发者能够轻松地将数据与视图连接起来。掌握以下两点即可入门：
- 插值语法
{{ }}：用于动态显示数据。 - 指令语法
v-bind:：用于动态绑定属性。
未来你会接触到更多指令，比如v-model（双向绑定）、v-if（条件渲染）、v-for（列表渲染），但理解这两大基础语法是通往 Vue 高级特性的第一步。
💡 温馨提示
- Vue 提供了许多内置指令，形式统一为
v-???，建议查阅官方文档了解完整列表。 - 在开发中尽量避免在模板中书写复杂的逻辑，应将业务逻辑移至方法或计算属性中。
- 使用
v-bind时，记得它支持对象语法，例如：:style="{ color: textColor }"。
📌参考代码片段（完整 HTML 页面）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>模板语法</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><av-bind:href="school.URL"v-bind:x="hello">点我去{{school.name}}学习1</a><a:href="school.URL":x="hello">点我去{{school.name}}学习2</a></div><scripttype="text/javascript">Vue.config.productionTip=false;newVue({el:'#root',data:{name:'Jack',hello:'你好',school:{URL:'http://www.atguigu.com',name:'尚硅谷'}}})</script></body></html>🚀 掌握了这些基础知识，你已经迈出了学习 Vue 的坚实一步！接下来可以探索事件处理、表单绑定、组件化开发等内容，逐步构建出功能丰富的前端应用。