HTML中的Vue3解析！

#Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架。它在 HTML 中发挥着重要的作用，可以让开发者轻松地创建交互式的网页应用。与 HTML 结合时，Vue 3 通过自定义指令、组件等方式增强了 HTML 的功能。#

一、vue的概述

Vue 采用了双向数据绑定机制，当数据发生变化时，视图会自动更新；反之，当用户在视图中进行操作时，数据也会相应地改变。这使得开发者无需手动操作 DOM 来更新视图，大大提高了开发效率，减少了出错的可能性。

Vue 是一款流行的用于构建用户界面的渐进式 JavaScript 框架，深入浅近地介绍了vue.js的框架的功能用法及实现原理。包含了HTML、CSS和JavaScript这三种前端开发必配的功能。

简洁易用：Vue 的 API 设计简洁直观，易于理解和上手，学习曲线较低，适合初学者快速掌握.
响应式原理：采用响应式数据绑定，当数据发生变化时，相关的 DOM 元素会自动更新，开发者只需关注数据的变化，无需手动操作 DOM，极大地提高了开发效率2.
组件化开发：支持组件化开发，可将复杂的用户界面拆分成多个独立的、可复用的组件，每个组件都有自己的 HTML、CSS 和 JavaScript 代码，便于维护和管理，提高了代码的可重用性和可维护性.
虚拟 DOM：使用虚拟 DOM 来优化页面渲染性能。当数据变化时，Vue 会先更新虚拟 DOM，然后通过对比新旧虚拟 DOM 的差异，高效地更新实际的 DOM 元素，减少不必要的 DOM 操作，提高页面渲染速度.
生态丰富：拥有庞大的生态系统，涵盖了众多实用的插件、工具和库，如 Vue Router 用于实现路由功能、Vuex 用于状态管理等，能够满足各种不同类型项目的需求.

二、Vue 基础语法

1、插值表达式

使用双大括号{{ }}进行数据绑定，如{{ message }}，可以在 HTML 标签中显示 Vue 实例中message属性的值，且支持 JavaScript 表达式，如{{ count + 1 }}。

javascript"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个Vue程序</title><script src="./vue.global.js"></script>
</head>
<body><!-- {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染如: Vue 实例中定义一个 msg 变量, 值为 "Hello world", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world" --><div id="app"><p>{{ msg }}</p><p>{{ web.title }}</p><p>{{ web.url }}</p><p>{{ func() }}</p></div><script>//创建一个 Vue 应用程序Vue.createApp({// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等// 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。setup(){// 定义数据let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下，你就知道",url: "www.baidu.com"}// 定义方法（函数）const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,fun}}}).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上</script>

在HTML部分：

①. {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染

②. 如: Vue 实例中定义一个 msg 变量, 值为 "Hello world",在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world" -->

在JavaScript部分：

①. 创建一个 Vue 应用程序 Vue.createApp({ }).mount("#app");

②. 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等

③. 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。

④. 在setup(){ }中定义数据、方法、返回一个对象类型的数据。

javascript">    <script>//创建一个 Vue 应用程序Vue.createApp({// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等// 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。setup(){// 定义数据let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下，你就知道",url: "www.baidu.com"}// 定义方法（函数）const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,fun,}}}).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上</script>

代码运行后如下：

三、响应式数据

1、ref方法

基本概念：ref函数用于创建一个响应式的数据引用。它接受一个内部值作为参数，并返回一个包含value属性的对象，这个value属性就是响应式数据。当value的值发生变化时，Vue 会自动更新与之绑定的 DOM 元素或组件。

2、reactive方法

基本概念：reactive函数用于创建一个响应式的对象。它接受一个普通对象作为参数，并返回一个响应式的代理对象。这个代理对象的所有属性都将是响应式的，当属性的值发生变化时，Vue 会自动更新与之绑定的 DOM 元素或组件。

在HTML部分：

①. {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染

②.定义一个盒子<button></button>实现点击功能

javascript">    <div id="app"><p>{{ msg }}</p><p>{{ web.title }}</p><p>{{ web.url }}</p><p>{{number}}</p><button @click="change">点击我更换网址</button></div>

在JavaScript部分：

在 JavaScript 中，import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。

javascript">import {createApp, ref, reactive} from "./vue.esm-browser.js"  //模块化开发方式

createApp是 Vue 3 中用于创建 Vue 应用实例的函数。它接受一个根组件选项对象作为参数，返回一个应用实例对象，该对象提供了一系列用于挂载、配置和管理应用的方法。

javascript">        createApp({setup(){let number = 10;console.log(typeof number,number);  const web = reactive({title: "百度一下，你就知道",url: "www.baidu.com"});console.log(typeof web, web);const change = () => {web.url += "-->数据被修改";}// 返回一个对象类型的数据return { msg: "成功创建第一个Vue应用程序!" ,   web,number,change}}}).mount("#app");

reactive函数用于创建一个响应式的对象。它接受一个普通对象作为参数，并返回一个响应式的代理对象，该代理对象的所有属性都将是响应式的，当属性的值发生变化时，Vue 会自动更新与之绑定的 DOM 元素或组件。
change函数在 Vue 响应式数据的上下文中，并没有一个特定的、内置的change函数具有统一明确的定义呀，不过开发者可以自行定义名为change的函数来实现特定的业务逻辑，比如在数据发生变化时执行一些额外的操作，如数据验证、发送数据到后台、更新其他相关数据等。
return函数返回一个对象类型的数据。

代码运行后如下：

点击后如下：

四、绑定事件

1、在 Vue 3 的模板中，可以使用`v-on`指令来绑定事件，其缩写形式为`@`。

javascript">        <!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br>

在上述代码中，@click表示绑定的是点击事件，edit是在 Vue 实例中定义的一个方法，当按钮被点击时，edit方法将会被调用。

2.事件修饰符

enter space tab 按键修饰符

keyup是在用户松开按键时才触发

keydown是在用户按下按键时立即触发

javascript">回车<input type="text" @keyup.enter="add(40, 60)"> <br>空格 <input type="text" @keyup.space="add(20, 30)"> <br>Tab <input type="text" @keydown.tab="add(10, 20)"> <br>w <input type="text" @keyup.w="add(5, 10)">

组合快捷键

javascript">Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>Ctrl + A    <input type="text" @keyup.ctrl.a="add(20, 30)"

在HTML部分：

javascript">    <div id="app"><h3>{{ msg }}</h3><h3>{{ web.url }}</h3><h3>{{ web.user }}</h3><h3>{{ sub(100, 20) }}</h3><!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br></div>

在JavaScript部分：

在 JavaScript 中，import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。

javascript"> import { createApp, reactive, ref } from './vue.esm-browser.js'

使用reactive函数创建一个响应式对象，定义一个edit函数，当按钮被点击时执行该函数

javascript">setup() {let msg = "成功启动!!!";const web = reactive({title: "百度",url: "baidu.com",user: 0});const edit = () => {web.url = "www.baidu.com"msg = "云中医" console.log(`msg修改为: ${msg}`); }

错误示例 msg = "云中医" console.log(`msg修改为: ${msg}`);
从控制台打印信息可以知道确实改变了，但是模板没有响应更新（非响应式数据）不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据。

代码运行后如下：

使用reactive函数创建一个响应式对象，定义一个edit函数，当按钮被点击时执行该函数，则会发生加减函数的作用。

javascript">   const add = (a, b) => {web.user += a + b}const sub = (a, b) => {return a - b}

return函数让属性暴露给网页使用户使用。

javascript">                return {msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新web, //响应式数据edit, //方法add,sub,}

总代码：

javascript"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定事件</title>
</head><body><div id="app"><h3>{{ msg }}</h3><h3>{{ web.url }}</h3><h3>{{ web.user }}</h3><h3>{{ sub(100, 20) }}</h3></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {let msg = "成功启动!!!";const web = reactive({title: "百度",url: "baidu.com",user: 0});const edit = () => {web.url = "www.baidu.com"msg = "云中医" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据console.log(`msg修改为: ${msg}`); //从控制台打印信息可以知道确实改变了，但是模板没有响应更新（非响应式数据）    }const add = (a, b) => {web.user += a + b}const sub = (a, b) => {return a - b}return {msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新web, //响应式数据edit, //方法add,sub,}}}).mount("#app")</script>
</body>
</html>

点击修改按钮后：

点击加法后：

五、节点的条件渲染

1、`v-if`指令

v-if指令用于根据表达式的值来决定是否渲染一个元素或组件。当表达式的值为true时，元素或组件会被渲染到 DOM 中；当表达式的值为false时，元素或组件则不会被渲染。

`2、v-else`用法：

v-else指令必须紧跟在v-if或v-else-if指令的元素后面，用于在v-if或v-else-if的条件不成立时渲染对应的元素

3.`v-else-if`用法

v-else-if指令可以在v-if和v-else之间使用，用于添加更多的条件判断

4.`v-show`指令

v-show指令也用于根据表达式的值来控制元素的显示或隐藏。与v-if不同的是，v-show只是通过 CSS 的display属性来切换元素的显示状态，元素在 DOM 中始终存在。

在HTML中：

javascript"><h3>显示状态: {{ web.show }}</h3>

Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none）

javascript"> <p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>

Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点）。当遇到需要频繁显示和隐藏的场景时，不是合使用v-if，因为频繁增删节点，会导致渲染效率下降

javascript"> <p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p>

实现点击效果：

javascript"><button @click="toggle">切换显示状态</button>

在JavaScript部分中：

在 JavaScript 中，import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。

javascript">import { createApp, reactive, ref } from './vue.esm-browser.js'

与上面相似，创建一个reactive属性，给予属性show的初始值为true，该属性用于控制两个<p>元素的显示状态

javascript">const web = reactive({   // 响应式数据show: true,user: 500});

当toggle的值为true时，p元素通过v-show指令显示出来；当toggle的值为false时，p元素会通过 CSS 的display属性被隐藏，但仍然存在于 DOM 中。

javascript">        const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获}

总代码：

javascript">    <script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true,user: 500});const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获}const add_user = () => {web.user += 1000;}return {web,toggle,add_user}}}).mount("#app");</script>

代码运行如下：

点击后切换和增加后：

六、遍历指令

主要的遍历指令是v-for，它用于基于一个数组或对象来循环渲染一组元素。
其中value是属性的值，key是属性的键，index是可选的索引

1. 遍历对象的值

增加样式

    <style>.textColor{color: red;}</style>

在HTML中：

设置一个盒子使用v-for指令来遍历一个对象的属性
使用value是去获取属性的值

   <div id="app"><!-- 遍历对象的值 --><h4>遍历对象的值。</h4><ul><li v-for="value in data.user">{{ value }}</li></ul></div>

在JavaScript中：

在 JavaScript 中，import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。
定义一个user属性，而这个属性中包含着name属性值 “李雷” 和 gender 属性值 “女”。

    <script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script>

代码运行后：

2.遍历对象的值和索引

在HTML中：

实现对象的值和索引的同时实现，使用value，index去获取属性的值和索引。

   <div id="app"><h4>遍历对象的值和索引。 注意：写指令时，先值后索引</h4><ul><li v-for="(value, index) in data.number">{{ index }} : {{ value }}</li></ul></div>

在JavaSCript中：

在 JavaScript 中，import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。
定义一个user属性，而这个属性中包含着name属性值 “李雷” 和 gender 属性值 “女”。
定义一个number属性，而这个数组包含了“十”，“十一”，“十二”。

    <script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"], //对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script>

代码运行后如下：

3.遍历对象的值和键。

在HTML中：

实现对象的值和索引的同时实现，使用value，key去获取属性的值和键。

        <!-- 遍历对象的值和键。 注意：写指令时，先值后键 --><h4>遍历对象的值和键。 注意：写指令时，先值后键</h4><ul><li v-for="(value, key) in data.user">{{ key }} : {{ value }}</li></ul>

在JavaScript中：

在 JavaScript 中，import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。
利用无序列表 <li v-for="(value, key) in data.user"> {{ key }} : {{ value }} </li> v-for循环；

代码运行后如下：

4.遍历对象的值，键和索引。

无序列表 <li v-for="(value, key) in data.user"> {{ key }} : {{ value }} </li> v-for循环；增加{{index}}即可

<body><div id="app"><!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 --><h4>遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4><ul><li v-for="(value, key, index) in data.user">{{ index }} : {{ key }} : {{ value }}</li></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"], //对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script></body>

代码运行如下：

5. 指令嵌套

先用v-for指令遍历对象，然后展示符合v-if条件的节点
<template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染

        <h4>指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点</h4><ul><!--注： <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  --><template v-for="(value, key, index) in data.user"><li v-if="index == 1">  {{ index }} : {{ key }} : {{ value }}</li>           </template></ul>

代码运行后如下：

七、属性动态化指令

1.`v-bind`指令

v-bind指令用于动态地绑定一个或多个属性到元素上。其缩写形式为: 。

例如，要动态绑定一个元素的iuput标签动态属性绑定，v-bind:value；

    <div id="app"><h3>  iuput标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"></div>

简写模式：

    <div id="app"><h3>  iuput标签动态属性绑定(简写形式)   :str </h3><input type="text" :value="web.str"></div>

实现点击按钮，发生点击一次增加一个w，点击button按钮触发change函数进行修改。str元素定义增加的东西。

<body><div id="app"><h3>  iuput标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"><h3>  iuput标签动态属性绑定(简写形式)   :str </h3><input type="text" :value="web.str">    </div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({str: "w",})const change = () => {web.str += "w";}return {web,change}}}).mount("#app")</script>
</body>

2.修改图片

img标签动态属性绑定(简写形式) :src

    <div id="app"><h3>  img标签动态属性绑定(简写形式)    :src </h3><img :src="web.img"></div>

实现点击按钮，发生点击一次则改变一次图片，点击button按钮触发change函数进行修改。img元素改变图片的链接。

    <script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({str: "w",img: "./img_src/logo0.png",})const change = () => {web.str += "w";web.img=`./img_src/logo1.png`;}return {web,change}}}).mount("#app")</script>