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 }}。
<!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(){ }中定义数据、方法、返回一个对象类型的数据。
<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>实现点击功能
<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 相关的函数、组件、插件等，以便在当前模块中使用。
import {createApp, ref, reactive} from "./vue.esm-browser.js" //模块化开发方式
createApp是 Vue 3 中用于创建 Vue 应用实例的函数。它接受一个根组件选项对象作为参数，返回一个应用实例对象，该对象提供了一系列用于挂载、配置和管理应用的方法。
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指令来绑定事件，其缩写形式为@。
<!-- 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是在用户按下按键时立即触发
回车<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)">组合快捷键
Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)"在HTML部分：
<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 相关的函数、组件、插件等，以便在当前模块中使用。
import { createApp, reactive, ref } from './vue.esm-browser.js'使用reactive函数创建一个响应式对象，定义一个edit函数，当按钮被点击时执行该函数
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函数，当按钮被点击时执行该函数，则会发生加减函数的作用。
const add = (a, b) => {
web.user += a + b
}
const sub = (a, b) => {
return a - b
}return函数让属性暴露给网页使用户使用。
return {
msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
web, //响应式数据
edit, //方法
add,
sub,
}总代码：
<!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中：
<h3>显示状态: {{ web.show }}</h3>Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none）
<p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p> Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点） 。 当遇到需要频繁显示和隐藏的场景时，不是合使用v-if， 因为频繁增删节点，会导致渲染效率下降
<p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p>实现点击效果：
<button @click="toggle">切换显示状态</button>在JavaScript部分中：
在 JavaScript 中，
import用于从其他模块导入功能或对象，在 Vue 项目中，它主要用于导入 Vue 相关的函数、组件、插件等，以便在当前模块中使用。
import { createApp, reactive, ref } from './vue.esm-browser.js'与上面相似，创建一个reactive属性，给予属性show的初始值为true，该属性用于控制两个<p>元素的显示状态
const web = reactive({ // 响应式数据
show: true,
user: 500
});
- 当
toggle的值为true时，p元素通过v-show指令显示出来；当toggle的值为false时，p元素会通过 CSS 的display属性被隐藏，但仍然存在于 DOM 中。
const toggle = () => {
web.show = !web.show; // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获
}总代码：
<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>
代码运行后如下：
