【愚公系列】《循序渐进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 的响应式系统主要包括以下过程：

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

🦋1.2 数据绑定的两种模式

单向绑定（One-Way Binding）：
- 数据从组件的数据源传递到 DOM。
- 使用 {{}} 模板语法或 v-bind 指令将数据绑定到视图。
示例：
```
<div>{{ message }}</div>  
```
双向绑定（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++;
};

绑定数据：ref 返回一个对象，其值保存在 .value 属性中。

视图中使用：

<div>{{ counter }}</div>
<button @click="increment">增加</button>

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

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

示例：

import { reactive } from 'vue';

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

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

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

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

触发更新：

当响应式数据发生变化时，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 实例中的变量，假设其值为 <strong>加粗的文本</strong>，那么在页面中会被渲染为加粗的文本。
需要注意的是，v-html 直接插入 HTML 存在 XSS 攻击的风险，因此使用时应确保插入的内容是可信的，或进行必要的过滤。

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

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

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

<div>{{ message }}</div> <!-- 纯文本显示，不解析为HTML -->
<div v-html="htmlContent"></div> <!-- 解析为HTML并插入 -->

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

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

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

🦋3.6 总结

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

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

任务要求

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

参考练习步骤

创建一个新的 HTML 文件，并引入 Vue 库。
在 HTML 中创建一个 <div> 元素，设置其 id 为 app，作为 Vue 应用的挂载点。
在 <script> 标签内，创建 Vue 实例，定义 username 和 password 数据属性。
定义 login 方法，处理登录逻辑。
使用 Vue 模板语法创建输入框和“登录”按钮。
对输入框使用 v-model 指令，实现数据双向绑定。
为“登录”按钮添加事件监听器，单击时调用 login 方法。
运行 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 Exercise</title>
    <!-- 引入 Vue 库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 创建 Vue 应用的挂载点 -->
    <div id="app">
        <h1>Login Form</h1>
        <!-- 使用 Vue 模板语法创建输入框和“登录”按钮 -->
        <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">Login</button>
        <p>{{ message }}</p>
    </div>

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

        const App = {
            setup() {
                // 使用 ref 定义响应式变量
                const username = ref('');
                const password = ref('');
                const message = ref('');

                // 定义 login 方法
                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
                };
            }
        };

        // 创建并挂载 Vue 实例到 DOM 元素上
        createApp(App).mount('#app');
    </script>
</body>
</html>

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

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

文章目录

🚀前言

🚀一、小结与上机演练

🔎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 模板

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

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

☀️2.1.1 `v-if`

☀️2.1.2 `v-show`

☀️2.2.1 *相同点**

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