【愚公系列】《循序渐进Vue.js 3.x前端开发实践》009-Vue 模板与应用：小结与上机演练

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

文章目录

• 🚀前言
• 🚀一、小结与上机演练
• • 🔎1.Vue 是如何实现组件与数据间的绑定的?
  • • 🦋1.1 **Vue 的响应式系统 **
    • 🦋1.2 ** 数据绑定的两种模式 **
    • 🦋1.3 **Vue 3 中的响应式实现 **
    • • ☀️1.3.1 ** 使用 `ref` 创建响应式数据 **
      • ☀️1.3.2 ** 使用 `reactive` 创建响应式对象 **
    • 🦋1.4 ** 响应式原理：依赖追踪与触发更新 **
    • 🦋1.5 ** 模板与数据的绑定 **
    • 🦋1.6 ** 总结 **
  • 🔎2. 在 Vue 中，v-if 和 v-show 是两种条件渲染指令，它们各自如何使用，又有哪些异同。
  • • 🦋2.1 ** 使用方法 **
    • • ☀️2.1.1 `v-if`
      • ☀️2.1.2 `v-show`
    • 🦋2.2 ** 异同点 **
    • • ☀️2.2.1 * 相同点 **
      • ☀️2.2.2 ** 不同点 **
    • 🦋2.3 ** 选择建议 **
  • 🔎3.Vue 中的模板插值如何使用，它是否支持直接插入 HTML 文本?
  • • 🦋3.1 * 模板插值的基本用法 **
    • 🦋3.2 ** 插值的表达式 **
    • 🦋3.3 ** 插入 HTML 文本 **
    • • ☀️3.3.1 **v-html 指令 **
    • 🦋3.4 ** 模板插值与 HTML 插入的区别 **
    • 🦋3.5 ** 示例：模板插值与 HTML 插入 **
    • 🦋3.6 ** 总结 **
• 🚀二、创建一个简单的 Vue 模板

---

🚀前言

基于 Vue 的模板语法深入探讨了 Vue 框架中的模板插值、模板指令等关键技术，并详细介绍了如何利用 Vue 实现组件的条件渲染和循环渲染。这些内容构成了 Vue 框架的核心部分，仅仅掌握这些技术，便能在前端网页开发中显著提升效率。

🚀一、小结与上机演练

🔎1.Vue 是如何实现组件与数据间的绑定的?

Vue 通过 响应式系统 实现组件与数据之间的双向绑定。在 Vue 中，当数据发生变化时，组件会自动更新。其核心机制基于 “数据劫持” 和 “依赖追踪”。接下来，我们详细解析 Vue 是如何实现这一绑定的。

---

🦋1.1 Vue 的响应式系统

Vue 3 使用 Proxy 实现响应式数据绑定，而 Vue 2 使用了 Object.defineProperty 进行数据劫持。Vue 的响应式系统主要包括以下过程：

1. 数据劫持： Vue 将对象或数组的属性劫持（或代理），监听它们的变化。
2. 依赖追踪： 当模板中使用数据时，Vue 会记录这些数据与模板中的组件或 DOM 之间的依赖关系。
3. 自动更新： 当数据发生变化时，Vue 会自动触发重新渲染，更新与数据绑定的组件。

---

🦋1.2 数据绑定的两种模式

1. 单向绑定（One-Way Binding）：

   • 数据从组件的 数据源 传递到 DOM。
   • 使用 {{}} 模板语法或 v-bind 指令将数据绑定到视图。

   示例：

   div>{{message}}div>  
   

2. 双向绑定（Two-Way Binding）：

   • Vue 通过 v-model 指令实现 双向绑定。双向绑定意味着数据在组件与视图之间可以同步更新。

   示例：

   input v-model="inputValue" />
   p>当前输入：{{inputValue}}p>
   

   • 当用户在输入框输入内容时，inputValue 会更新；反之，inputValue 的改变也会同步到输入框中。

---

🦋1.3 Vue 3 中的响应式实现

☀️1.3.1 使用 ref 创建响应式数据

ref 是 Vue 3 中用于创建基本类型数据的响应式容器。它会自动监听其值的变化，并触发组件的更新。

示例：

import { ref } from 'vue';

const counter = ref(0);
const increment = () => {
    counter.value++;
};

☀️1.3.2 使用 reactive 创建响应式对象

对于复杂对象，Vue 3 使用 reactive 将对象转换为响应式数据。

示例：

import { reactive } from 'vue';

const state = reactive({
    count: 0,
    message: 'Hello Vue'
});

• reactive 将整个对象包裹，使其内部的所有属性都变为响应式。

---

🦋1.4 响应式原理：依赖追踪与触发更新

1. 依赖追踪：

   • 当模板中使用响应式数据时，Vue 会将该数据与组件建立依赖关系。这个过程在 Vue 内部由 Dep 和 Watcher（Vue 2）或 effect（Vue 3）来管理。

2. 触发更新：

   • 当响应式数据发生变化时，Vue 会通过发布 - 订阅模式触发与该数据相关的组件更新。

   简单模拟实现：

   let activeEffect = null;
   
   function reactive(target) {
     const handler = {
       get(obj, key) {
         if (activeEffect) {
           
           track(obj, key);
         }
         return obj[key];
       },
       set(obj, key, value) {
         obj[key] = value;
         
         trigger(obj, key);
         return true;
       }
     };
     return new Proxy(target, handler);
   }
   
   function track(obj, key) {
     console.log(`依赖追踪: ${key}`);
   }
   
   function trigger(obj, key) {
     console.log(`触发更新: ${key}`);
   }
   

---

🦋1.5 模板与数据的绑定

Vue 将模板解析为 虚拟 DOM（VNode），并在首次渲染时将虚拟 DOM 与真实 DOM 绑定在一起。当数据发生变化时，Vue 会通过 比较新旧虚拟 DOM（diff 算法），更新发生变化的部分，而不会重新渲染整个页面。

---

🦋1.6 总结

• Vue 的响应式系统 使得数据和视图之间的绑定变得简单、高效。
• 使用 ref 和 reactive 创建响应式数据，并通过 v-model 实现双向绑定。
• Vue 通过 依赖追踪 和 自动更新 实现数据变化时的视图更新，确保页面与数据的同步。

通过这些机制，Vue 实现了组件和数据之间的动态绑定，使开发者能够更高效地构建响应式用户界面。

🔎2. 在 Vue 中，v-if 和 v-show 是两种条件渲染指令，它们各自如何使用，又有哪些异同。

在 Vue 中，v-if 和 v-show 都是用于条件渲染的指令，但它们的实现方式和使用场景有所不同。

🦋2.1 使用方法

☀️2.1.1 v-if

v-if 用于根据条件决定是否 创建和销毁 元素。

示例：

div v-if="isVisible">显示内容div>

• 创建 / 销毁 DOM 元素： 当 isVisible 为 true 时，div 元素将被创建；为 false 时，div 元素将从 DOM 中完全移除。

☀️2.1.2 v-show

v-show 通过 控制元素的 CSS display 样式 来实现元素的显示或隐藏。

示例：

div v-show="isVisible">显示内容div>

• 切换 display 样式： 当 isVisible 为 true 时，div 的 display 样式为 block；为 false 时，display 样式为 none。

---

🦋2.2 异同点

☀️2.2.1 相同点*

• 都是用于 条件渲染 的指令。
• 都可以通过 布尔值表达式 来控制元素的显示状态。

☀️2.2.2 不同点

特性	v-if	v-show
实现方式	通过创建 / 销毁 DOM 元素	通过切换 CSS display 属性
性能开销	较高：创建和销毁 DOM 有性能开销	较低：仅改变 CSS，不涉及 DOM 操作
首次渲染	当条件为 false 时，不会渲染该元素	元素会被渲染，但初始状态为隐藏
适用场景	条件变化不频繁，或需要大量 DOM 操作	条件变化频繁，需要快速切换显示状态

---

🦋2.3 选择建议

• 使用 v-if：

  • 条件在渲染时确定（如页面加载时）或 切换频率低。
  • 不希望在页面上创建不需要的 DOM 元素，需更高的性能优化。

• 使用 v-show：

  • 需要频繁切换显示状态（如 频繁点击切换）。
  • 元素在初始渲染时就存在，但会有显示或隐藏状态的需求。

通过理解这两者的区别，可以根据具体的性能和渲染需求选择合适的条件渲染方式。

🔎3.Vue 中的模板插值如何使用，它是否支持直接插入 HTML 文本?

在 Vue 中，模板插值 是将数据插入到 HTML 模板中的一种方式，通常通过双大括号 {{}} 的语法来使用。模板插值允许将 Vue 实例中的数据动态地显示在页面上。

🦋3.1 模板插值的基本用法*

示例：

div>{{message}}div>

• 这里，message 是 Vue 组件中的一个变量，插值会将 message 的值插入到页面中，并渲染为普通文本。

🦋3.2 插值的表达式

Vue 允许在插值中使用 JavaScript 表达式：

div>{{message.toUpperCase() }}div>
div>{{1 + 1}}div>

• 在插值中可以进行简单的运算、调用函数或处理逻辑。

🦋3.3 插入 HTML 文本

Vue 的模板插值默认是 安全的 ，即插值内容会被作为纯文本处理， 不会解释为 HTML，从而防止 XSS（跨站脚本攻击）。但 Vue 也提供了插入 HTML 的功能，通过使用 v-html 指令。

☀️3.3.1 v-html 指令

v-html 可以将 HTML 代码作为内容插入，并将其解析为真正的 HTML 元素。

示例：

div v-html="htmlContent">div>

• 这里，htmlContent 是 Vue 实例中的变量，假设其值为 加粗的文本，那么在页面中会被渲染为加粗的文本。
• 需要注意的是，v-html 直接插入 HTML 存在 XSS 攻击的风险，因此使用时应确保插入的内容是可信的，或进行必要的过滤。

🦋3.4 模板插值与 HTML 插入的区别

• 模板插值 （{{}}）：将内容作为 纯文本 处理，不会解析为 HTML。
• v-html：允许直接插入和解析 HTML 内容，但使用时需要小心安全风险。

🦋3.5 示例：模板插值与 HTML 插入

div>{{message}}div> 
div v-html="htmlContent">div> 

假设 Vue 实例中的数据如下：

const app = Vue.createApp({
    data() {
        return {
            message: "不会加粗的文本",
            htmlContent: "加粗的文本"
        }
    }
}).mount('#app')

• 第一个 div 会显示 "不会加粗的文本"，因为它是通过模板插值显示纯文本。
• 第二个 div 会显示 加粗的文本，因为 v-html 解析了 HTML 标签并将其作为真实的 DOM 元素插入。

🦋3.6 总结

• Vue 中使用双大括号 {{}} 进行模板插值时，数据会作为纯文本处理，无法解析 HTML 标签。
• 如果需要插入和解析 HTML 内容，可以使用 v-html，但要谨慎以防安全风险，例如 XSS 攻击。

🚀二、创建一个简单的 Vue 模板

任务要求

1. 创建一个 Vue 应用，展示一个包含账号和密码输入框的登录表单。
2. 使用 Vue 模板语法渲染表单。
3. 添加表单验证功能，确保账号和密码字段不为空。
4. 用户单击“登录”按钮时，显示提示信息，反馈登录成功或失败。

参考练习步骤

1. 创建一个新的 HTML 文件，并引入 Vue 库。
2. 在 HTML 中创建一个
   元素，设置其 id 为 app，作为 Vue 应用的挂载点。

3. 在 标签内，创建 Vue 实例，定义 username 和 password 数据属性。
4. 定义 login 方法，处理登录逻辑。
5. 使用 Vue 模板语法创建输入框和“登录”按钮。
6. 对输入框使用 v-model 指令，实现数据双向绑定。
7. 为“登录”按钮添加事件监听器，单击时调用 login 方法。
8. 运行 Vue 应用，检查结果。

参考示例代码

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Vue Template Exercisetitle>
    
    script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
head>
body>
    
    div id="app">
        h1>Login Formh1>
        
        label for="username">Username:label>
        input type="text" id="username" v-model="username" required>
        br>
        label for="password">Password:label>
        input type="password" id="password" v-model="password" required>
        br>
        
        button @click="login">Loginbutton>
        p>{{message}}p>
    div>

    script>
        const { createApp, ref } = Vue;

        const App = {
            setup() {
                
                const username = ref('');
                const password = ref('');
                const message = ref('');

                
                const login = () => {
                    if (username.value && password.value) {
                        message.value = 'Logged in successfully!';
                    } else {
                        message.value = 'Please enter both username and password.';
                    }
                };

                
                return {
                    username,
                    password,
                    message,
                    login
                };
            }
        };

        
        createApp(App).mount('#app');
    script>
body>
html>

通过本例，你将学习到如何在 Vue 中利用模板语法创建简洁的用户界面，并实现基础的用户交互处理。此外，你可以通过扩展这个练习，尝试增加表单验证、错误提示等功能，这将有助于你更深入地理解 Vue 模板的运用。