在第一部分中,我们已经创建了第一个Vue应用,并初步了解了Vue的模板语法。这一节课,我们将深入学习Vue的模板语法,这是构建Vue应用的基础。模板语法让我们可以在HTML中直接使用JavaScript表达式,实现数据绑定和事件处理。
Vue的模板语法基于HTML,但增加了一些特殊的语法,让我们能够声明式地将数据渲染到DOM中。这些语法包括插值、指令、属性绑定等。掌握这些语法后,你就能构建出功能丰富、交互性强的用户界面。

文本插值是Vue模板语法中最基础的部分。我们在第一章中已经使用过,就是双大括号{{ }}。让我们更深入地了解它的用法。
最基本的文本插值就是将数据直接显示在页面上:
|<div id="app"> <p>{{ message }}</p> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { message: '欢迎学习Vue.js' }; } }); app.mount('#app'); </script>
这段代码会在页面上显示"欢迎学习Vue.js"。双大括号内的内容会被Vue解析为JavaScript表达式,然后将其结果转换为字符串并插入到DOM中。
文本插值不仅可以显示简单的字符串,还可以显示数字、布尔值等基本类型:
|<div id="app"> <p>姓名:{{ name }}</p> <p>年龄:{{ age }}</p> <p>是否在线:{{ isOnline }}</p> </div> <script> const { createApp } = Vue; const app = createApp({ data
在这个例子中,name是字符串,age是数字,isOnline是布尔值。Vue会自动将它们转换为字符串并显示。布尔值true会显示为字符串"true",布尔值false会显示为"false"。
文本插值还支持JavaScript表达式。你可以在双大括号内使用各种JavaScript表达式:
|<div id="app"> <p>计算结果:{{ 10 + 20 }}</p> <p>字符串拼接:{{ firstName + ' ' + lastName }}</p> <p>三元表达式:{{ age >= 18 ? '成年人' : '未成年人' }}</p> </div> <script> const { createApp } = Vue; const app = createApp({ data
在双大括号内,我们可以进行数学运算、字符串拼接、使用三元运算符等。Vue会计算这些表达式的值,然后将结果插入到DOM中。
使用语句。例如,不能使用if语句、for循环等。如果需要复杂的逻辑,应该使用计算属性或方法。
默认情况下,文本插值会将内容作为纯文本处理。如果你需要插入HTML代码,需要使用v-html指令。
让我们先看看如果直接使用文本插值插入HTML会发生什么:
|<div id="app"> <p>{{ htmlContent }}</p> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { htmlContent: '<strong>这是粗体文本</strong>' }; } });
如果你运行这段代码,你会看到页面上显示的是<strong>这是粗体文本</strong>这个字符串本身,而不是粗体的"这是粗体文本"。这是因为Vue默认会将内容转义,防止XSS攻击。
如果你确实需要插入HTML,可以使用v-html指令:
|<div id="app"> <p v-html="htmlContent"></p> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { htmlContent: '<strong>这是粗体文本</strong>' };
v-html指令会将属性的值作为HTML代码插入到元素中。现在,"这是粗体文本"会以粗体显示。
使用v-html时要特别小心,因为它会直接插入HTML代码,可能导致XSS攻击。只应该对可信的内容使用v-html,永远不要对用户输入的内容使用v-html。
在HTML中,我们经常需要动态设置元素的属性。例如,根据数据动态设置图片的src属性、链接的href属性等。在Vue中,我们使用v-bind指令来实现属性绑定。
让我们从一个简单的例子开始。假设我们有一个图片,需要根据数据动态设置其src属性:
|<div id="app"> <!-- 错误的方式:这样不会工作 --> <img src="imageUrl"> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { imageUrl: 'https://example.com/image.jpg' };
如果你直接写src="imageUrl",浏览器会将其视为字符串字面量"imageUrl",而不是变量。我们需要使用v-bind指令来绑定属性:
|<div id="app"> <!-- 正确的方式:使用v-bind --> <img v-bind:src="imageUrl"> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { imageUrl: 'https://example.com/image.jpg' };
v-bind:src="imageUrl"告诉Vue将imageUrl的值绑定到img元素的src属性上。现在,图片的src属性会动态设置为imageUrl的值。
v-bind指令有一个简写形式,就是冒号:。上面的代码可以简写为:
|<div id="app"> <!-- 使用简写形式 --> <img :src="imageUrl"> </div>
这两种写法是完全等价的,但简写形式更加简洁,是Vue开发中的常见做法。
v-bind可以绑定任何HTML属性。让我们看一个更复杂的例子:
|<div id="app"> <a :href="linkUrl" :title="linkTitle" :target="linkTarget"> 点击这里 </a> </div> <script> const { createApp } = Vue; const app = createApp({
在这个例子中,我们同时绑定了href、title和target三个属性。每个属性都可以根据数据动态设置。
v-bind还可以绑定class和style属性,这两个属性有特殊的用法,我们稍后会详细介绍。现在让我们先看看如何绑定class属性:
|<div id="app"> <div :class="className">这是一个div</div> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { className: 'active' };
当className的值是'active'时,div元素会有class="active"。如果className的值改变,class属性也会自动更新。
在上节课中,我们已经使用过事件绑定,就是@click。现在让我们更深入地了解事件绑定的用法。
Vue使用v-on指令来监听DOM事件。基本语法是v-on:事件名="处理函数"。让我们从一个简单的例子开始:
|<div id="app"> <button v-on:click="handleClick">点击我</button> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { count: 0 };
在这个例子中,我们使用v-on:click="handleClick"来监听按钮的点击事件。当按钮被点击时,handleClick方法会被调用。
v-on指令也有简写形式,就是@符号。上面的代码可以简写为:
|<div id="app"> <button @click="handleClick">点击我</button> </div>
在Vue中,事件处理函数可以接收事件对象作为参数,这样就可以获取和操作与事件相关的详细信息。事件对象由浏览器生成,包含了事件类型、触发事件的元素、鼠标坐标、按键信息等丰富内容。 下面让我们通过上面的代码,演示如何在事件处理函数中获取和使用事件对象:
|<div id="app"> <button @click="handleClick">点击我</button> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { count: 0 };
在handleClick方法中,我们添加了event参数。这个参数是原生的DOM事件对象,包含了事件的所有信息,比如触发事件的元素、鼠标位置等。
我们也可以在模板中直接调用方法并传递参数:
|<div id="app"> <button @click="handleClick('参数1', '参数2')">点击我</button> </div> <script> const { createApp } = Vue; const app = createApp({ methods: { handleClick(arg1, arg2) { alert
在这个例子中,我们直接在模板中调用handleClick并传递了两个参数。如果你需要同时传递参数和事件对象,可以使用$event:
|<div id="app"> <button @click="handleClick('参数1', $event)">点击我</button> </div> <script> const { createApp } = Vue; const app = createApp({ methods: { handleClick(message, event) { console.
$event是Vue提供的特殊变量,代表原生DOM事件对象。通过这种方式,我们可以同时传递自定义参数和事件对象。
除了调用方法,我们还可以在模板中直接编写内联的JavaScript代码。这种方式适合简单的操作:
|<div id="app"> <button @click="count++">增加计数</button> <p>计数:{{ count }}</p> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return
在这个例子中,我们直接在@click中写count++,当按钮被点击时,count的值会直接增加。这种方式不需要定义方法,适合简单的操作。
内联处理也可以访问事件对象:
|<div id="app"> <button @click="alert('按钮被点击了!')">点击我</button> </div> <script> const { createApp } = Vue; const app = createApp({}); app.mount('#app'); </script
在这个例子中,我们直接调用alert函数。虽然这个例子很简单,但它展示了内联处理简单的操作的能力。
在Vue中,我们不仅可以静态地绑定属性或事件(比如:href、@click),还可以用“动态参数”来让绑定变得更加灵活。所谓动态参数,就是我们可以让要绑定的属性名或事件名由数据动态决定。
要实现动态参数,只需要用方括号[]把属性名或事件名包裹起来,例如:[propName]或@[eventName],这样方括号里面的内容就会被当作JavaScript表达式求值,根据结果来决定实际绑定的内容。这非常适合在需要根据数据变化动态调整绑定时使用。
|<div id="app"> <a :[attributeName]="url">链接</a> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { attributeName: 'href', url:
在这个例子中,:[attributeName]="url"会根据attributeName的值动态决定要绑定哪个属性。如果attributeName是'href',就相当于:href="url";如果attributeName是'title',就相当于:title="url"。
动态参数也可以用于事件绑定:
|<div id="app"> <button @[eventName]="handleEvent">按钮</button> </div> <script> const { createApp } = Vue; const app = createApp({ data() { return { eventName: 'click' };
在这个例子中,@[eventName]="handleEvent"会根据eventName的值动态决定要监听哪个事件。如果eventName是'click',就监听点击事件;如果eventName是'mouseenter',就监听鼠标进入事件。
动态参数的值必须是字符串,或者是null。null值会显式移除绑定。动态参数表达式中不能有空格和引号,某些字符如空格和引号在HTML属性名中是无效的。
下面我们将通过一个详细的综合示例,巩固并加深对 Vue 模板语法的理解。在这个示例中,我们将一步步创建一个用户信息卡片,全面展示文本插值、属性绑定、事件绑定等 Vue 常用功能的结合与动态用法,包括如何动态展示用户信息、如何通过绑定属性和事件实现交互式界面,以及不同语法之间的协同工作方式:
|<div id="app"> <div class="card"> <img :src="user.avatar" :alt="user.name + '的头像'"> <h2>{{ user.name }}</h2> <p>年龄:{{ user.age }}</p> <p>邮箱:{{ user.email }}</p> <button @click="toggleOnline"
在这个例子中,我们使用了多种模板语法。img标签的src和alt属性使用v-bind绑定,h2和p标签使用文本插值显示用户信息,按钮使用@click监听点击事件,按钮的文本也使用文本插值和三元表达式来动态显示。
让我们逐步分析这段代码。首先,img标签使用了属性绑定:
|<img :src="user.avatar" :alt="user.name + '的头像'">
:src="user.avatar"将图片的src属性绑定到user.avatar的值。:alt="user.name + '的头像'"将alt属性绑定到一个表达式的结果,这个表达式将用户名和字符串拼接起来。
接下来,我们使用文本插值显示用户信息:
|<h2>{{ user.name }}</h2> <p>年龄:{{ user.age }}</p> <p>邮箱:{{ user.email }}</p>
这些插值会显示用户的姓名、年龄和邮箱。而代码的按钮部分使用了事件绑定和条件文本:
|<button @click="toggleOnline"> {{ user.isOnline ? '下线' : '上线' }} </button>
@click="toggleOnline"监听点击事件,当按钮被点击时调用toggleOnline方法。按钮的文本使用三元表达式,根据user.isOnline的值显示"下线"或"上线"。
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户信息卡片</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></
在这一部分,我们学习了Vue模板语法的核心内容。文本插值让我们可以在模板中显示数据,属性绑定让我们可以动态设置元素属性,事件绑定让我们可以响应用户交互。 这些语法是Vue应用的基础,几乎每个Vue组件都会用到它们。掌握这些语法后,你就能构建出基本的交互式界面了。
在下一个部分中,我们将深入学习Vue的响应式系统,了解数据是如何变成响应式的,以及响应式系统的工作原理。这将帮助你更好地理解Vue的工作机制。