首页课程创意工坊价格

2 / 15

响应式数据

模板语法 | 自在学

模板语法

在第一部分中，我们已经创建了第一个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插值

默认情况下，文本插值会将内容作为纯文本处理。如果你需要插入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的工作机制。