首页 > 编程笔记 > JavaScript笔记 阅读：4

Vue模板用法详解（附带实例）

模板是 Vue 框架的核心组成部分，Vue 采用的基于 HTML 的模板语法大大降低了前端开发者的学习曲线，使得大多数开发者能够快速上手。

在 Vue 的分层设计理念中，模板属于视图层，它允许开发者专注于页面布局的组织，而不必深陷数据逻辑的处理。同时，当开发者在 Vue 组件内部编写数据逻辑时，也无须担心视图的渲染问题，因为 Vue 的模板系统会自动处理数据到视图的映射。

在普通 HTML 文档中，若要更新页面以响应数据变化，通常需要通过 JavaScript 进行 DOM 操作，这包括获取指定元素并修改其属性或文本，这种方法不仅烦琐，而且容易出错。

而 Vue 的模板语法极大地简化了这一过程。我们只需将变化的值定义为组件的属性，并在 HTML 文档的相应位置插入这些属性变量。当数据变化时，所有使用该变量的组件都会自动同步更新。这一特性正是 Vue 模板中的插值表达式所实现的。

学习 Vue 模板的第一步，就是掌握插值表达式的使用。通过这种方式，Vue 使得数据和视图之间的同步变得更加直观和高效。

Vue模板插值

首先，创建一个名为 1.tempText.html 的文件，并在其中编写标准的HTML文档结构。接下来，在 <body> 标签中添加一个元素，用于测试： 
<div style="text-align: center;">
    <h1>这里是模板的内容:1次点击</h1>
    <button>按钮</button>
</div>
在运行上述 HTML 代码后，浏览器中将显示一个居中的标题和一个按钮。目前，点击按钮不会有任何效果，因为我们还没有添加任何逻辑代码。

现在，让我们通过引入 Vue 框架，为这个网页添加动态功能，当点击按钮时，标题中的数值将发生变化。

为了实现这个计数器功能，我们将使用 Vue 组件。以下是完整的示例代码： 
<!DOCTYPE html>
<html lang="en">
<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"></script>
</head>
<body>
    <div id="Application" style="text-align: center;">
        <h1>这里是模板的内容:{{ count }}次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const {createApp, ref} = Vue
        // 定义一个 Vue 组件
        let config = {
            setup() {
                // 定义组件中的数据
                const count = ref(0)
                // 实现按钮点击的方法
                const clickButton = () => {
                    count.value += 1
                }
                return {count, clickButton}
            }
        }
        // 将 Vue 组件绑定到页面上 id 为 Application 的元素上
        createApp(config).mount("#Application")
    </script>
</body>
</html>
在浏览器中运行上述代码并点击页面中的按钮，你将看到页面上的标题文本随着点击而更新。

在 HTML 标签中使用双花括号 {{ }} 可以进行变量插值，这是 Vue 中最基础的模板语法之一。这种语法可以将当前组件中定义的属性的值插入指定位置。如果组件中的属性具有响应性，这种插值将默认实现数据绑定的效果，即当我们修改变量的值时，页面上的渲染将同步更新。

在某些情况下，我们可能希望组件的渲染由变量控制，但一旦渲染完成就不再受变量影响。这时，可以使用 v-once 指令。

带有 v-once 指令的元素在进行变量插值时只会执行一次，之后即使数据变化，元素的内容也不会更新。例如： 
<h1 v-once>这里是模板的内容:{{count}}次点击</h1>
在浏览器中再次实验，可以发现网页中指定的插值位置被替换成文本“0”后，无论我们再怎么点击按钮，标题也不会发生改变。

还有一点需要注意，如果要插值的文本为一段 HTML 代码，则不能直接使用双花括号进行插值，因为双花括号会将其内的变量解析为纯文本。例如，在 Vue 组件 App 中定义的数据如下： 
const countHTML = ref("<span style='color:red;'>0</span>")
如果使用双花括号插值的方式插入HTML代码，最终的效果会将其以文本的方式渲染出来，代码如下： 
<h1 v-once>这里是模板的内容:{{countHTML}}次点击</h1>
运行效果如下图所示：


图 1 用双花括号进行HTML插值

这种效果明显不符合我们的预期，对于 HTML 代码插值，需要使用 v-html 指令来实现，示例代码如下： 
<h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>
V-html 指令可以指定一个 Vue 变量数据，其会通过 HTML 解析的方式将原始 HTML 替换到其指定的标签位置。

以上代码运行后的效果如下图所示：


图 2 使用v-html进行HTML插值

上面我们介绍了如何在标签内部进行内容的插值。我们知道，标签除其内部的内容外，本身的属性设置也是非常重要的。例如，我们可能需要动态改变标签的 style 属性，从而实现元素渲染样式的修改。在 Vue 中，可以使用属性插值的方式做到标签属性与变量的绑定。

对于标签属性的插值，Vue 中不再使用双花括号的方式，而是使用 v-bind 指令，示例代码如下： 
<h1 v-bind:id="id1">这里是模板的内容:{{count}}次点击</h1>
定义一个简单的 CSS 样式如下： 
#h1 {
    color: red;
}
再添加一个名为 id1 的 Vue 组件属性，代码如下： 
const id1 = ref("h1")
运行代码后，可以看到 id 属性值已动态绑定到指定的 <h1> 标签上。当 Vue 组件中的 id1 属性值发生变化时，这些变化也会实时反映在 <h1> 标签上。

通过动态绑定，我们可以灵活地更改元素的属性，如样式表。v-bind 指令同样适用于其他 HTML 属性，只需使用冒号加属性名的方式指定即可。

无论是使用双花括号进行标签内容插值，还是使用 v-bind 进行属性插值，我们都可以直接将变量进行插值，也可以使用基本的 JavaScript 表达式。例如： 
<h1 v-bind:id="id1">这里是模板的内容:{{count + 10}}次点击</h1>
运行上述代码后，页面上渲染的数值将会是 count 属性值增加 10 后的结果。

在使用插值表达式时，需要注意的是，虽然 Vue 允许在插值中使用简单的 JavaScript 表达式，但应避免使用过于复杂或嵌套的表达式，这可能会导致语法错误或意外的行为。

Vue模板指令

本质上，Vue 中的模板指令也是 HTML 标签属性，其通常由前缀“v-”开头，例如前面使用过的 v-bind、v-once 等都是指令。

大部分指令都可以直接设置为 JavaScript 变量或单个 JavaScript 表达式。我们首先创建一个名为 2.directives.html 的测试文件，在其中编写 HTML 的通用代码后引入 Vue 框架，之后在 body 标签中添加如下代码： 
<div id="Application">
    <h1 v-if="show">标题</h1>
</div>
<script>
    const {createApp, ref} = Vue
    // 定义一个 Vue 组件
    const config = {
       setup() {
           const show = ref(true)
           return {show}
       }
   }
   createApp(config).mount("#Application")
</script>
在上述代码中，v-if 就是一个简单的选择渲染指令，其设置为布尔值 true 时，当前标签元素才会被渲染。

一些特殊的 Vue 指令也可以指定参数，例如 v-bind 和 v-on 指令，对于可以添加参数的指令，参数和指令使用冒号进行分隔，例如： 
v-bind:style
v-on:click
指令的参数本身也可以是动态的。例如，我们可以区分 id 选择器和类选择器来定义不同的组件样式，之后动态地切换组件的属性，示例如下：
1) CSS样式： 
#h1 {
    color:red;
}
.h1 {
    color:blue
}

2) HTML 标签的定义如下： 
<h1 v-bind:[prop]="name" v-if="show">标题</h1>

3) 在 Vue 组件中定义属性数据如下： 
setup(){
    const show = ref(true)
    const prop = ref("class")
    const name = ref("h1")
    return {show, prop, name}
}
在浏览器中运行上述代码，可以看到 <h1> 标签被正确地绑定了 class 属性。

在参数后面，还可以为 Vue 中的指令增加修饰符，修饰符会为 Vue 指令增加额外的功能。以一个常见的应用场景为例，在网页中，如果有可以输入信息的输入框，通常我们不希望用户在首尾输入空格符，通过 Vue 的指令修饰符，很容易实现自动去除首尾空格符的功能，示例代码如下： 
<input v-model.trim="content">
如上述代码所示，我们使用 v-model 指令将输入框的文本与 content 属性进行绑定，如果用户在输入框中输入的文本首尾有空格符，当输入框失去焦点时，Vue 会自动帮我们去掉这些首尾空格符。

至此，你应该已经体会到了 Vue 指令的灵活与强大之处。最后，我们将介绍 Vue 中常用的指令缩写。在 Vue 应用开发中，v-bind 和 v-on 两个指令的使用非常频繁，对于这两个指令，Vue 为开发者提供了更加高效的缩写方式。

对于 v-bind 指令，我们可以将其 v-bind 前缀省略，直接使用冒号加属性名的方式进行绑定，例如 v-bind:id ="id"可以缩写为如下模样： 
:id="id"
另外，在最新的 Vue 3.4.0 及以上版本中，如果属性绑定的变量名与属性名完全一致，则可以将其写法进一步简化，省略变量名部分。下面两种写法都可以： 
<h1 :id="id" v-if="show">标题</h1>
<h1 :id v-if="show">标题</h1>

对于 v-on 类的事件绑定指令，可以将前缀 v-on:使用 @ 符替代，例如 v-on:click="myFunc"指令可以缩写成如下模样： 
@click="myFunc"
在后面的学习中你会体验到，有了这两个缩写功能，将大大提高 Vue 应用的编写效率。

相关文章