【愚公系列】《循序渐进Vue.js 3.x前端开发实践》005-Vue 模板与应用：模板基础

原创

愚公搬代码

发布于 2025-05-17 10:58:23

2490

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

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

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

本章将深入探讨 Vue 框架的模板功能，引导你掌握 Vue 模板的使用技巧，开启精通 Vue 模板的旅程。

🚀一、模板基础

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

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

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

🔎1.模板插值

<!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>
    <style type="text/css">
        #h1 {
            color: red;
        }
    </style>
</head>
<body>
    <!-- <div style="text-align: center;">
        <h1>这里是模板的内容:1次点击</h1>
        <button>按钮</button>
    </div> -->
    <div id="Application" style="text-align: center;">
        <h1>这里是模板的内容:{{count}}次点击</h1>
        <h1 v-once>这里是模板的内容:{{count}}次点击</h1>
        <h1>这里是模板的内容:{{countHTML}}次点击</h1>
        <h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>
        <!-- <h1 v-once>这里是模板的内容:{{count}}次点击</h1> -->

        <h1 v-bind:id="id1">这里是模板的内容:{{count}}次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>
    <script>
        const {createApp, ref} = Vue
        // 定义一个Vue组件, 名为App
        let config = {
            setup() { 
                // 定义组件中的数据
                const count = ref(0)
                const countHTML = ref("<span style='color:red;'>0</span>")
                const id1 = ref("h1")
                // 实现按钮点击的方法
                const clickButton = () => {
                    count.value += 1
                }
                return {count, countHTML, id1, clickButton}
            }
        }
        // 将Vue组件绑定到页面上id为Application的元素上
        createApp(config).mount("#Application") 
    </script>
</body>
</html>

这段代码是一个使用 Vue.js 3 的网页示例，展示了如何通过 Vue 组件为页面添加交互性功能。主要包括模板插值、事件绑定、v-once 指令的使用，以及通过 v-html 来渲染 HTML。

🦋1.1 HTML 头部

<!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>
    <style type="text/css">
        #h1 {
            color: red;
        }
    </style>
</head>

<!DOCTYPE html>：声明文档类型为 HTML5。
<meta charset="UTF-8">：指定字符编码为 UTF-8，确保页面能够正确显示国际字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度为设备宽度，确保页面在移动设备上能够自适应显示。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue.js 3 的 CDN，确保在页面中可以使用 Vue 框架。
<style>：在 #h1 的 CSS 样式中定义了标题的颜色为红色。注意，这个 ID 样式会影响后面 v-bind:id="id1" 绑定了 id1 的元素。

🦋1.2 HTML body 部分

<body>
    <div id="Application" style="text-align: center;">
        <h1>这里是模板的内容:{{count}}次点击</h1>
        <h1 v-once>这里是模板的内容:{{count}}次点击</h1>
        <h1>这里是模板的内容:{{countHTML}}次点击</h1>
        <h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>
        <h1 v-bind:id="id1">这里是模板的内容:{{count}}次点击</h1>
        <button v-on:click="clickButton">按钮</button>
    </div>

<div id="Application">：这是 Vue 应用挂载的根元素，Vue 实例将在此挂载并控制内部的元素及行为。
<h1>{{count}}次点击</h1>：使用 Vue 的双花括号进行模板插值，将 count 的值显示在页面上，count 初始值为 0。
<h1 v-once>{{count}}次点击</h1>：使用 v-once 指令，告诉 Vue 该元素只会渲染一次，即使 count 发生变化，页面也不会重新渲染该元素的内容。
<h1>{{countHTML}}次点击</h1>：这里使用了 countHTML 变量，其内容是一段包含 HTML 的字符串，但因为 {{}} 插值会将其视为纯文本，所以页面不会渲染其中的 HTML 标签。
<h1 v-once><span v-html="countHTML"></span>次点击</h1>：这里使用 v-html 指令来渲染 countHTML 变量中的 HTML 字符串，这会正确解析和渲染 <span> 标签中的样式。
<h1 v-bind:id="id1">{{count}}次点击</h1>：使用 v-bind:id="id1" 动态绑定 id 属性，id1 变量的初始值是 "h1"，这会使这个 h1 元素的 id 被设置为 h1，并应用在 <style> 中定义的样式（颜色为红色）。
<button v-on:click="clickButton">按钮</button>：为按钮绑定 clickButton 方法，每次点击按钮时会执行该方法。

🦋1.3 Vue 实例部分

<script>
    const {createApp, ref} = Vue;

    let config = {
        setup() {
            // 定义响应式变量 count，初始值为 0
            const count = ref(0);

            // 定义响应式变量 countHTML，初始值为带红色样式的 HTML 字符串
            const countHTML = ref("<span style='color:red;'>0</span>");

            // 定义 id1，初始值为 "h1"
            const id1 = ref("h1");

            // 定义 clickButton 方法，每次点击按钮，count 值增加 1
            const clickButton = () => {
                count.value += 1;
            };

            return { count, countHTML, id1, clickButton };
        }
    };

    // 创建并挂载 Vue 实例到 id 为 Application 的元素上
    createApp(config).mount("#Application");
</script>

const {createApp, ref} = Vue：从 Vue 中解构出 createApp 和 ref。createApp 用来创建 Vue 实例，ref 用来定义响应式数据。
const count = ref(0)：count 是一个响应式变量，初始值为 0。每次点击按钮，count 的值会更新，页面上显示的次数也会随之更新。
const countHTML = ref("<span style='color:red;'>0</span>")：countHTML 是一个包含 HTML 标签的响应式变量，用来展示 HTML 格式化内容。
const id1 = ref("h1")：id1 是一个响应式变量，初始值为 "h1"，用于动态绑定元素的 id。
const clickButton = () => { count.value += 1; }：这是按钮点击事件的处理函数，每次点击按钮时，count 增加 1。
createApp(config).mount("#Application")：创建 Vue 应用，并将其挂载到 id 为 Application 的 DOM 元素上。

🦋1.4 总结

模板插值：{{count}} 用于将 count 的值插入到 HTML 中，随着 count 的变化，页面内容会自动更新。
v-once 指令：用于防止元素的重新渲染，元素在初次渲染后就不会再更新。
v-html 指令：用于安全地渲染 HTML 字符串（而不是纯文本）。
事件绑定：通过 v-on:click="clickButton" 绑定按钮点击事件，每次点击按钮时，count 值增加。

这段代码的主要功能是在点击按钮后，计数值增加，并且展示了动态绑定 id、模板插值、v-once、v-html 等 Vue 特性。

🔎2.模板指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #h1 {
            color:red;
        }
        .h1 {
            color:blue
        }
    </style>
</head>
<body>
    <div id="Application">
        <h1 v-bind:[prop]="name" v-if="show">标题</h1>
        <h1 :id="id" v-if="show">标题</h1>
        <h1 :id v-if="show">标题</h1>
        <input v-model.trim="content">
    </div>
    <script>
        const {createApp, ref} = Vue
        // 定义一个Vue组件
        const config = {
            setup(){
                const show = ref(true)
                const prop = ref("class")
                const name = ref("h1")
                const content = ref("")
                const id = 'h1'
                return {show, prop, name, content, id}
            }
        }
        createApp(config).mount("#Application") 
    </script>
    
</body>
</html>

🦋2.1 HTML 头部部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #h1 {
            color: red;
        }
        .h1 {
            color: blue;
        }
    </style>
</head>

<meta charset="UTF-8">：声明文档的字符编码为 UTF-8。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：确保页面在 Internet Explorer 中以最新的渲染模式显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度为设备宽度，确保页面自适应显示。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的 CDN 版本。
<style>：定义了一些样式，#h1 ID 选择器将字体颜色设为红色，而 .h1 类选择器将字体颜色设为蓝色。

🦋2.2 HTML body 部分

<body>
    <div id="Application">
        <h1 v-bind:[prop]="name" v-if="show">标题</h1>
        <h1 :id="id" v-if="show">标题</h1>
        <h1 :id v-if="show">标题</h1>
        <input v-model.trim="content">
    </div>
</body>

<div id="Application">：Vue 应用的挂载点，所有 Vue 组件将绑定到这个元素。
<h1 v-bind:[prop]="name" v-if="show">标题</h1>：
- 这里使用了 Vue 的 v-bind:[prop] 动态绑定属性语法。
- [prop] 是一个动态属性名称。prop 的值为 "class"，因此等价于 v-bind:class="name"，即动态绑定类名为 name 的值。
- name 的值为 "h1"，所以渲染时该元素会应用 .h1 样式（字体颜色为蓝色）。
- v-if="show"：条件渲染，show 为 true 时该元素才会被渲染。
<h1 :id="id" v-if="show">标题</h1>：
- :id="id"：等同于 v-bind:id="id"，动态绑定 id 属性，id 的值是 "h1"，因此该元素的 id 被设置为 h1，应用了 #h1 样式（字体颜色为红色）。
- 同样使用了 v-if="show"，只有 show 为 true 时，元素才会被渲染。
<h1 :id v-if="show">标题</h1>：
- :id：这是缩写形式的 v-bind:id，但没有提供值。此时 Vue 会将 id 设置为空（即 <h1 id="">标题</h1>）。
- 同样使用了 v-if="show" 进行条件渲染。
<input v-model.trim="content">：
- v-model：实现了双向数据绑定，将 <input> 输入框的值绑定到 content 变量。
- trim 修饰符：会自动去除用户输入的前后空格。

🦋2.3 Vue 实例部分

<script>
    const { createApp, ref } = Vue;

    const config = {
        setup() {
            // 定义响应式数据
            const show = ref(true);  // 控制是否渲染 h1 元素
            const prop = ref("class");  // 用于动态绑定的属性名
            const name = ref("h1");  // 绑定的 class 或 id 值
            const content = ref("");  // 与 input 双向绑定的值
            const id = 'h1';  // 静态绑定的 id 值

            // 返回响应式数据给模板使用
            return { show, prop, name, content, id };
        }
    };

    // 创建并挂载 Vue 实例到 id 为 Application 的元素上
    createApp(config).mount("#Application");
</script>

const { createApp, ref } = Vue;：从 Vue 中解构出 createApp 和 ref。createApp 用于创建 Vue 应用，ref 用于创建响应式数据。
setup()：Vue 3 的 setup 函数，用于定义组件的逻辑。
- show = ref(true)：定义响应式变量 show，初始值为 true，控制是否显示标题元素。
- prop = ref("class")：定义响应式变量 prop，其值为 "class"，用于动态绑定属性名。
- name = ref("h1")：定义响应式变量 name，初始值为 "h1"，用于动态绑定的属性值。
- content = ref("")：定义响应式变量 content，与 <input> 元素的值双向绑定。
- id = 'h1'：静态变量 id，初始值为 "h1"，用于绑定到 id 属性上。
createApp(config).mount("#Application")：创建 Vue 应用，并将其挂载到页面上的 #Application 元素。

🦋2.4 总结

页面上会显示多个标题 <h1> 元素，具体内容根据 v-bind 和 v-if 控制。
第一个标题绑定了动态 class（根据 prop 的值），使用 .h1 样式（字体为蓝色）。
第二个标题的 id 动态绑定为 "h1"，使用 #h1 样式（字体为红色）。
输入框使用 v-model.trim 与 content 变量双向绑定，当用户输入时，content 的值会实时更新，并去除前后空格。

这段代码展示了 Vue 中常用的指令和动态绑定特性，包括 v-bind 动态属性、v-if 条件渲染和 v-model 的双向绑定。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

登录后参与评论

0 条评论

热度