中国大学mooc慕课
196.43MB · 2025-10-30
Vue的模板语法是基于HTML的声明式语法，它允许你在HTML中嵌入Vue的特殊标记（如插值、指令），将响应式数据与DOM绑定。Vue会将模板编译为渲染函数，最终生成真实DOM并实现“数据变化→页面自动更新”的响应式效果。
简单来说，模板是“带Vue语法的HTML”，比如：
<div>{{ message }}</div>
这里的{{ message }}是文本插值，Vue会把data中的message值替换到此处。
让我们从最基础的“Hello Vue3”开始，体验模板语法的作用：
<!-- 1. 引入Vue3 CDN（最新版本：3.4.21） -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 2. 模板容器：Vue会渲染这里的内容 -->
<div id="app">
{{ message }}
</div>
<!-- 3. 创建并挂载Vue应用 -->
<script>
const { createApp } = Vue
// 创建应用实例
const app = createApp({
// data选项：返回响应式数据（必须是函数）
data() {
return {
message: 'Hello Vue3!'
}
}
})
// 将应用挂载到#app元素（触发模板渲染）
app.mount('#app')
</script>
运行效果：页面显示Hello Vue3!。
核心知识点拆解：
createApp()：创建Vue应用的“根实例”；data()：返回组件的响应式数据对象（数据变化时，模板自动更新）；app.mount('#app')：将Vue实例与DOM元素关联，启动渲染；{{ message }}：“插值语法”，将data中的message值插入模板。Vue的模板语法遵循**“声明式渲染”**原则：你只需描述“数据应该如何呈现”，Vue会处理“数据变化时如何更新DOM”的细节。其核心流程如下（用流程图辅助理解）：
graph TD
A[Vue模板] --> B[解析器：生成AST（抽象语法树）]
B --> C[编译器：将AST转为渲染函数]
C --> D[渲染函数：生成虚拟DOM]
D --> E[虚拟DOM对比：更新真实DOM]
关键说明：
报错：Cannot find element: #app
原因：app.mount('#app')执行时，#app元素还未加载（比如脚本放在<head>中）。
解决：将<script>标签放在#app元素之后，或用DOMContentLoaded事件包裹：
document.addEventListener('DOMContentLoaded', () => {
app.mount('#app')
})
报错：Property "message" was accessed during render but is not defined on instance.
原因：模板中用了{{ message }}，但data()中未定义message属性。
解决：检查data()返回的对象，确保包含message：
data() {
return {
message: 'Hello Vue3!' // 必须定义
}
}
文本插值是Vue中最常用的语法，用{{ }}（双大括号）将响应式数据插入模板。
示例：
<div id="app">
<!-- 插入字符串 -->
{{ message }}
<!-- 插入表达式结果（仅支持简单表达式） -->
{{ message + '!' }}
<!-- 插入方法返回值 -->
{{ message.toUpperCase() }}
</div>
<script>
const app = createApp({
data() {
return {
message: 'hello'
}
}
})
app.mount('#app')
</script>
运行效果：页面显示hello hello! HELLO。
规则限制：
1+1、message.toUpperCase()）；if (message) { ... }、for (let i=0; i<10; i++)）；{{ '<span>hi</span>' }}会显示为字符串<span>hi</span>，而非真实的<span>标签）。v-html指令如果需要渲染包含HTML标签的字符串（比如后端返回的富文本），需用v-html指令（注意：此指令有安全风险！）。
示例：
<div id="app">
<!-- 文本插值：转义HTML -->
{{ rawHtml }}
<!-- v-html：渲染原始HTML -->
<div v-html="rawHtml"></div>
</div>
<script>
const app = createApp({
data() {
return {
rawHtml: '<span style="color: red;">Hello Vue3!</span>'
}
}
})
app.mount('#app')
</script>
运行对比：
<span style="color: red;">Hello Vue3!</span>（字符串）；v-html：显示红色的Hello Vue3!（真实的<span>标签）。v-html的安全红线：禁止用于用户输入v-html会直接插入原始HTML，如果内容来自用户输入（比如评论、私信），可能导致XSS攻击（跨站脚本攻击）。例如：
用户输入<script>alert('窃取密码')</script>，用v-html渲染会执行该脚本，窃取用户信息。
安全准则：
v-html渲染用户提交的内容；报错：Interpolations inside attributes are not allowed. Use v-bind instead.
原因：试图在HTML属性中用{{ }}插值（比如<img src="{{ imgUrl }}">）。
解决：用v-bind指令绑定属性（后续第三章详细讲）：
<img :src="imgUrl"> <!-- :是v-bind的缩写 -->
报错：v-html directive cannot be used on a self-closing element
原因：v-html用在自闭合标签上（比如<img v-html="html">），而v-html需要插入子内容。
解决：将v-html用在非自闭合标签（比如<div>、<span>）上：
<div v-html="html"></div> <!-- 正确 -->
HTML属性（如src、class、style）是“静态”的，但Vue允许用v-bind指令将属性动态绑定到响应式数据。
v-bind的基础用法：绑定单个属性v-bind的作用是将HTML属性与Vue数据关联，其缩写是:（冒号），这是开发中最常用的语法。
示例：绑定图片src
<div id="app">
<!-- 完整语法：v-bind:src -->
<img v-bind:src="imageUrl" alt="Vue Logo">
<!-- 缩写语法（推荐）：:src -->
<img :src="imageUrl" alt="Vue Logo">
</div>
<script>
const app = createApp({
data() {
return {
imageUrl: 'https://vuejs.org/images/logo.png'
}
}
})
app.mount('#app')
</script>
运行效果：页面显示Vue的logo图片。
关键说明：
imageUrl变化时，img的src属性会自动更新（响应式）；:是v-bind:的“语法糖”，更简洁。:[dynamicAttr]如果属性名本身是动态的（比如根据数据变化切换class或style），可以用方括号包裹属性名。
示例：
<div id="app">
<!-- 动态属性名：attrName是数据中的属性 -->
<div :[attrName]="attrValue">动态属性示例</div>
</div>
<script>
const app = createApp({
data() {
return {
attrName: 'class', // 属性名是class
attrValue: 'text-red' // 属性值是text-red
}
}
})
app.mount('#app')
</script>
运行结果：<div class="text-red">动态属性示例</div>。
说明：当attrName变为style时，属性会变成style="text-red"（当然style需要合法值，这里只是演示）。
如果要绑定多个属性，可以用v-bind绑定一个属性对象（对象的键是属性名，值是属性值）。
示例：绑定图片的多个属性
<div id="app">
<!-- 用v-bind绑定整个属性对象 -->
<img v-bind="imageAttrs">
</div>
<script>
const app = createApp({
data() {
return {
imageAttrs: {
src: 'https://vuejs.org/images/logo.png',
alt: 'Vue Logo',
title: 'Vue.js' // 鼠标 hover 显示的标题
}
}
}
})
app.mount('#app')
</script>
运行结果：
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo" title="Vue.js">
class与styleclass和style是最常动态绑定的属性，Vue提供了对象语法和数组语法简化操作。
class<div id="app">
<!-- 对象语法：class名=布尔值（true则添加，false则移除） -->
<div :class="{ active: isActive, 'text-red': hasError }">
动态Class示例
</div>
</div>
<script>
const app = createApp({
data() {
return {
isActive: true, // 添加active类
hasError: false // 不添加text-red类
}
}
})
app.mount('#app')
</script>
运行结果：<div class="active">动态Class示例</div>。
说明：当hasError变为true时，会添加text-red类（类名带横线时需用引号包裹）。
style<div id="app">
<!-- 对象语法：style属性=值（支持驼峰或短横线） -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
动态Style示例
</div>
</div>
<script>
const app = createApp({
data() {
return {
textColor: 'blue', // 文字颜色
fontSize: 16 // 字体大小（需拼接单位）
}
}
})
app.mount('#app')
</script>
运行结果：<div style="color: blue; font-size: 16px;">动态Style示例</div>。
所有用v-bind绑定的属性都是响应式的：当数据变化时，HTML属性会自动更新。例如：
// 修改imageUrl的值（假设app是Vue实例）
app.imageUrl = 'https://vuejs.org/images/vue-logo.png'
// 图片的src会自动更新为新地址
报错：Invalid dynamic argument expression: Expected a string or symbol
原因：动态属性名的表达式结果不是字符串（比如<div :[123]="value">）。
解决：确保动态属性名的表达式返回字符串：
<div :[attrName]="value"> <!-- attrName是字符串 -->
报错：v-bind without argument expects an object
原因：v-bind没有参数，但绑定的值不是对象（比如<img v-bind="imageUrl">）。
解决：
v-bind:src="imageUrl"；<img v-bind="imageAttrs">）。v-bind的缩写语法，并写一个绑定图片src的示例。答案：
v-bind的缩写是:（冒号）；<img :src="imageUrl" alt="Vue Logo">
v-bind动态切换一个按钮的disabled状态？答案：
用v-bind:disabled绑定一个布尔值：
<div id="app">
<button :disabled="isDisabled">点击我</button>
</div>
<script>
const app = createApp({
data() {
return {
isDisabled: true // 按钮禁用
}
}
})
app.mount('#app')
</script>
说明：当isDisabled变为false时，按钮恢复可点击。
v-bind绑定多个属性时，值需要是什么类型？请举一个示例。答案： 值需要是对象（键是属性名，值是属性值）。示例：
<div id="app">
<a :href="link.url" :target="link.target">
{{ link.text }}
</a>
</div>
<script>
const app = createApp({
data() {
return {
link: {
url: 'https://vuejs.org',
target: '_blank',
text: 'Vue官网'
}
}
}
})
app.mount('#app')
</script>
运行结果：<a href="https://vuejs.org" target="_blank">Vue官网</a>。
参考链接：
