文章目录
-
- [🎯 1.3 模板语法](#🎯 1.3 模板语法)
在学习 Vue.js 的过程中，模板语法 是构建动态用户界面的核心基础。Vue 通过简洁而强大的模板语法，将 HTML 与 JavaScript 表达式无缝结合，实现数据的动态绑定和视图的自动更新。本文将围绕 Vue 的两大核心模板语法------插值语法 和 指令语法 进行深入解析，并结合实际示例帮助你快速掌握其用法。
🎯 1.3 模板语法
Vue 的模板语法允许我们在 HTML 中嵌入 JavaScript 表达式，从而实现数据驱动的视图渲染。整个模板系统分为两类基本语法：
- 插值语法（双大括号表达式）
- 指令语法（以
v-开头）
下面我们将逐一讲解它们的功能、写法及应用场景。
完整代码：
css
<!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 文本中。
语法格式
html
{{ xxx }}其中 xxx 是一个合法的 JavaScript 表达式，可以直接访问 data 中的属性。
示例
html
<h3>你好，{{ name }}</h3>在 Vue 实例中定义了：
js
data: {
name: 'Jack'
}最终渲染结果为：
html
<h3>你好，Jack</h3>✅ 支持复杂表达式，例如：
{``{ firstName + ' ' + lastName }}或{``{ age > 18 ? '成人' : '未成年' }}
⚙️ 1.3.4 指令语法（Directives）
功能
用于解析标签的各种部分，包括：
- 标签属性（如
href,class,style） - 标签体内容（类似插值，但更灵活）
- 绑定事件（如点击、输入等）
所有指令都以 v- 开头，常见的有：
v-bindv-modelv-ifv-forv-on
常见指令：v-bind
作用
动态绑定 HTML 属性。
语法
html
v-bind:属性名 = "表达式"或简写形式：
html
:属性名 = "表达式"示例
html
<a v-bind:href="school.URL">点我去{{school.name}}学习1</a>
<a :href="school.URL" :x="hello">点我去{{school.name}}学习2</a>在 data 中定义：
js
school: {
URL: 'http://www.atguigu.com',
name: '尚硅谷'
},
hello: '你好'渲染后变为：
html
<a href="http://www.atguigu.com">点我去尚硅谷学习1</a>
<a href="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 页面）
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<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;
new Vue({
el: '#root',
data: {
name: 'Jack',
hello: '你好',
school: {
URL: 'http://www.atguigu.com',
name: '尚硅谷'
}
}
})
</script>
</body>
</html>🚀 掌握了这些基础知识，你已经迈出了学习 Vue 的坚实一步！接下来可以探索事件处理、表单绑定、组件化开发等内容，逐步构建出功能丰富的前端应用。