Vue3
之前就学过一些，不过用的比较少，基本忘完了/(ㄒoㄒ)/~~
跟着B站视频迅速回忆一下
创建一个Vue 3 应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.global.js"></script>
</head>
<!-- vue3 学习： 创建一个vue3应用 -->
<body>
<div id="app">
<!-- 插值表达式 -->
<!-- 可以获取到msg的值 -->
{{ msg }}
<h2>{{ web.title }}</h2>
<h2>{{ web.url }}</h2>
</div>
<script>
// 去掉前面的Vue.
// 使用的一种结构赋值语法，将vue对象中的createApp和reactive的属性赋值给createApp和reactive变量
// Vue本身就是一个对象，而且createApp和reactive和Vue里面存在的属性一致，所有可以精确的解包
const {createApp,reactive} = Vue
createApp({
// setup选项， 用于设置响应式数据和方法等
setup(){
// 定义一个应用网站
const web = reactive({
title: "zzz学习编程",
url: "baidu.com"
})
return {
msg: "success",
web
}
}
}).mount("#app") // 挂载
// Vue.createApp({
// // setup选项， 用于设置响应式数据和方法等
// setup(){
// // 定义一个应用网站
// const web = Vue.reactive({
// title: "zzz学习编程",
// url: "baidu.com"
// })
// return {
// msg: "success",
// web
// }
// }
// }).mount("#app") // 挂载
</script>
</body>
</html>
Vue 3 模块化开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
<h2>
{{web.title}}
</h2>
<h2>
{{web.url}}
</h2>
</div>
<!-- 添加属性：type="module" -->
<script type="module">
import {createApp, reactive} from './vue.esm-browser.js'
// 无法显示: 需要安装插件 live server（使用本地服务器进行调试）
createApp({
setup() {
const web = reactive({
title: "zz",
url: "XXX.com"
})
return {
msg: 'success',
web
}
}
}).mount("#app") // 挂载
</script>
</body>
</html>
ref和reactive区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
ref 和 reactive 的区别：
ref用于存储单个基本类型的数据,如:数字、字符串等使用
ref创建的响应式对象,需要通过,value属性来访问和修改其值
reactive用于存储复杂数据类型,如:对象或数组等
-->
<div id="app">
{{msg}}
<h2>{{ web.title }}</h2>
<h2>{{ web.url }}</h2>
<h2>{{ number }}</h2>
</div>
<script type="module">
import {createApp, reactive, ref} from './vue.esm-browser.js'
createApp({
setup() {
// ref 和 reactive 的区别
// const number = ref(10)
// ref 修改number的值(使用.value)
// number.value = 20
// 定义一个数组
const number = ref([1, 2, 3])
const web = reactive({
title: "zz",
url: 'xxx.com'
})
// reactive修改值，直接修改
web.url = 'baidu.com'
return {
msg: 'ref 和 reactive 的区别',
web,
number
}
}
}).mount("#app")
</script>
</body>
</html>
绑定事件v-on和按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
绑定事件 v-on
最常用的是click事件
-->
<div id="app">
{{ msg }}
<h2>{{ web.url }}</h2>
<h2>{{ web.user }}</h2>
<!-- 定义按钮 -->
<button v-on:click="edit">修改</button><br>
<button @click="edit">修改-简写</button> <hr>
按回车键： <input type="text" @:keyup.enter="add(40, 60)"><hr>
空格：<input type="text" @keyup.space="add(20, 30)"><hr>
<!-- 使用tab 使用：@keydown -->
Tab: <input type="text" @keydown.tab="add(10, 20)"><hr>
w: <input type="text" @keyup.w="add(1, 2)"><hr>
<!-- 组合快捷键 -->
Ctrl + enter: <input type="text" @keyup.ctrl.enter="add(3, 4)"><hr>
Ctrl + A: <input type="text" @keyup.ctrl.a="add(4, 5)"><hr>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
url: "baidu.com",
user: 0
})
// 修改网站网址
const edit = () => {
web.url = "www.zzzz.com"
}
const add = (a, b) => {
// 假设有两个网站（a和b）
// 统计这两个网站用户的新增数量
web.user += a + b
}
return {
msg: 'success',
web,
edit,
add
}
}
}).mount("#app")
</script>
</body>
</html>
显示和隐藏 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ web.show }} <hr>
<!-- 一段文字的显示和隐藏 -->
<p v-show="web.show">
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</p>
<button @click="toggle">切换显示状态</button>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
show: true
})
//
const toggle = () => {
web.show = !web.show
}
return {
web,
toggle
}
}
}).mount("#app")
</script>
</body>
</html>
条件渲染 v-if
- v-show：v-show 指令是通过修改元素的 display CSS 属性来控制元素的显示与隐藏。当 v-show 绑定的值为 true 时，元素的 display 属性会恢复为原本的值（如 block、inline 等），元素会正常显示；当绑定的值为 false 时，元素的 display 属性会被设置为 none，元素在页面上不可见，但仍然会占据页面布局空间。
- v-if 指令是根据表达式的值来决定是否将元素插入到 DOM 中。当 v-if 绑定的值为 true 时，元素会被渲染到 DOM 中；当绑定的值为 false 时，元素会从 DOM 中移除，不占据页面布局空间。
性能表现：
- v-show：由于 v-show 只是修改元素的 CSS 属性，不会涉及 DOM 的插入和移除操作，因此在初始渲染时性能开销相对固定。当频繁切换元素的显示状态时，v-show 的性能表现较好，因为它只是简单地修改 CSS 属性，不会触发 DOM 的重新渲染。
- v-if：在初始渲染时会根据表达式的值来决定是否渲染元素，如果条件为 false，则不会渲染该元素，因此在条件初始值为 false 时可以节省一定的初始渲染开销。但当条件发生变化时，v-if 会涉及 DOM 的插入和移除操作，这会带来较大的性能开销，尤其是在包含大量子元素或复杂组件的情况下。因此，v-if 不适合频繁切换的场景。
使用场景 - v-show：适用于需要频繁切换元素显示状态的场景，例如实现一个下拉菜单，当用户点击菜单按钮时显示菜单，再次点击时隐藏菜单。
- v-if：适用于在运行时条件很少改变的场景，例如根据用户的权限来决定是否显示某个功能按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ web.show }} <hr>
<!-- 一段文字的显示和隐藏 -->
<p v-show="web.show">
这是一段文字
</p>
<p v-if="web.show">
这也是一段文字
</p>
<button @click="toggle">切换显示状态</button>
<p v-if="web.user < 1000">新网站</p>
<p v-else-if="web.user >= 1000 && web.user <= 10000">优秀网站</p>
<p v-else>资深网站</p>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
show: true,
user: 15000
})
//
const toggle = () => {
web.show = !web.show
}
return {
web,
toggle
}
}
}).mount("#app")
</script>
</body>
</html>
动态属性绑定 v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.textColor {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- :value -->
<h3>value="zz.com"</h3>
<input type="text" value="zz.com">
<h3>v-bind:value="zz.com"</h3>
<input type="text" v-bind:value="web.url">
<!-- 简写 -->
<h3>:value="zz.com"</h3>
<input type="text" :value="web.url">
<!-- :src -->
<h3>src="pic.jpg"</h3>
<img src="pic.jpg" style="width: 100px;">
<h3>src="pic.jpg"</h3>
<img :src="web.img" style="width: 100px;">
<!-- :class -->
<h3>class="textcolor"</h3>
<p class="textColor">zzz学习</p>
<!-- 动态绑定class属性 -->
<h3>class="textcolor"</h3>
<p :class="{textColor: web.fontStatus}">zzz学习</p>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
url: 'zz.com',
img: 'pic.jpg',
fontStatus: false
})
return {
web
}
}
}).mount("#app")
</script>
</body>
</html>
遍历数组或对象 v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 遍历数组或对象 -->
<div id="app">
<ul>
<li v-for="value in data.number">
{{ value }}
</li>
</ul>
<!-- 数组遍历索引使用 index -->
<ul>
<li v-for="(value, index) in data.number">
index ==> {{ index }}: value ==> {{ value }}
</li>
</ul>
<!-- 对象遍历索引使用key -->
<ul>
<li v-for="(value, key) in data.user">
key ==> {{ key }}: value ==> {{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in data.user">
index ==> {{ index }}: keye ==> {{ key }}: value ==> {{ value }}
</li>
</ul>
<!-- 关于 template 更完整的说法：Vue会编译<template>里的内容，但是不会将其作为 DOM元素 渲染到页面上 -->
<ul>
<template v-for="(value, key, index) in data.user">
<li v-if="index === 1">
index ==> {{ index }}: keye ==> {{ key }}: value ==> {{ value }}
</li>
</template>
</ul>
<ul>
<!-- 动态属性value key -->
<li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">
index ==> {{ index }}: value.id ==> {{ value.id }}: value.name ==> {{ value.name }}: value.web ==> {{ value.web }}
</li>
</ul>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
number: ['10', '11', '12'], // 数组
user: {
// 对象
name: 'zzz',
gender: '女'
},
teacher: [ // 包含两个对象的数组
{ id: 100, name: '张三', web: 'zhangsan.com' },
{ id: 101, name: '李四', web: 'lisi.com' }
]
})
return {
data
}
}
}).mount("#app")
</script>
</body>
</html>
双向数据绑定 v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 之前学的v-bind（语法糖 :）是单向绑定 -->
<!-- v-model双向绑定 -->
<div id="app">
<h3>文本框：{{ data.text }}</h3>
<h3>单选框{{ data.radio }}</h3>
<h3>复选框：{{ data.checkbox }}</h3>
<h3>记住密码：{{ data.remember }}</h3>
<h3>下拉框：{{ data.select }}</h3>
<h3>下拉框：{{ data.select.join(',') }}</h3>
<!-- 单向数据绑定：当数据发送改变时， 视图会自动更新，但用户手动更改 input 的值，数据不会更新 -->
单向数据绑定： <input type="text" :value="data.text">
<hr>
<!--
双向数据绑定：当数据发生改变时，视图会自动更新，当用户手动更改input 的值，数据也会自动更新
对于<input type="text"> v-model绑定的是 input 元素的value值
-->
双向数据绑定： <input type="text" v-model="data.text">
<hr>
<!--
单选框
对于<input type="radio"> v-model绑定的是 input 元素的选中状态
-->
<input type="radio" v-model="data.radio" value="1">写作
<input type="radio" v-model="data.radio" value="2">画画
<hr>
<!--
复选框
对于 <input type="checkbox"> v-model绑定的是 input 元素的选择状态
-->
<input type="checkbox" v-model="data.checkbox" value="a">写作
<input type="checkbox" v-model="data.checkbox" value="b">画画
<input type="checkbox" v-model="data.checkbox" value="cc">运动
<hr>
<!--
单个复选框（记住密码）
-->
<input type="checkbox" v-model="data.remember">记住密码
<hr>
<!-- 下拉框 -->
<select v-model="data.select">
<option value="">请选择</option>
<option value="A">写作</option>
<option value="B">画画</option>
<option value="C">运动</option>
</select>
<hr>
<select v-model="data.select" multiple>
<option value="">请选择</option>
<option value="A">写作</option>
<option value="B">画画</option>
<option value="C">运动</option>
</select>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
text: "zzz.com", // 文本框
radio: "", // 单选
checkbox: [], // 复选框
remember: false, // 单个复选框- 记住密码
// select: "" // 下拉框
select: [] // 下拉框
})
return {
data
}
}
}).mount("#app")
</script>
</body>
</html>
v-model修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model修饰符 -->
<h3>url: {{ data.url }}</h3>
<h3>user: {{ data.user }}</h3>
实时渲染：<input type="text" v-model="data.url"><br>
失去焦点或按下回车之后在进行渲染： <input type="text" v-model.lazy="data.url"><br>
<!-- 输入 100人， web.user 的值仍为 100 -->
<!-- 不是完全控制 -->
输入框的值转换为数字类型： <input type="text" v-model.number="data.user"><br>
<!-- trim：感觉这个在项目中还是比较常用的 -->
去掉首尾空格：<input type="text" v-model.trim="data.user">
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
url: 'zz.com',
user: 10
})
return {
data
}
}
}).mount("#app")
</script>
</body>
</html>
渲染数据 v-text 和 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 渲染数据：v-text和v-html -->
<div id="app">
<h3>{{ data.title }}</h3>
<!-- 使用v-text -->
<h3 v-text="data.title"></h3>
<!-- 使用v-html -->
<!-- 解析html标签 -->
<h3 v-html="data.url"></h3> <!-- www.baidu.com -->
<!-- 直接输出内容 -->
<h3 v-text="data.url"></h3> <!-- <i style='color:blue;'>www.baidu.com</i> -->
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
title: 'zzzzz',
url: "<i style='color:blue;'>www.baidu.com</i>",
})
return {
data
}
}
}).mount("#app")
</script>
</body>
</html>
计算属性 computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 渲染数据：v-text和v-html -->
<div id="app">
<h3>add: {{ add() }}</h3>
<h3>add: {{ add() }}</h3>
<h3>sub: {{ sub }}</h3>
<h3>sub: {{ sub }}</h3>
x: <input type="text" v-model.number="data.x">
y: <input type="text" v-model.number="data.y">
</div>
<script type="module">
import { createApp, reactive, computed } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
x: 10,
y: 20
})
// 方法 - 无缓存
let add = () => {
console.log("add") // 打印两次
return data.x + data.y
}
// 计算属性： 有缓存
// 直接返回缓存值
// 当计算数学以来的响应数据发生变化时才会更新
const sub = computed(() => {
console.log("sub")
return data.x - data.y
})
return {
data,
add,
sub
}
}
}).mount("#app")
</script>
</body>
</html>
侦听器 watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 渲染数据：v-text和v-html -->
<div id="app">
爱好
<select v-model="hobby">
<option value="">请选择</option>
<option value="1">画画</option>
<option value="2">运动</option>
<option value="3">玩游戏</option>
</select>
<hr>
年
<select v-model="data.year">
<option value="">请选择</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
<hr>
月
<select v-model="data.month">
<option value="">请选择</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</div>
<script type="module">
import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
createApp({
setup() {
const hobby = ref("") // 爱好
const data = reactive({
year: '2022',
month: '10'
})
watch(hobby, (newValue, oldValue) => {
// console.log('newValue: ', newValue, 'oldValue:', oldValue)
if (newValue === '1') {
console.log('画画')
}
})
/*
watch 函数用于响应式地监听一个或多个数据源，并在数据源发生变化时执行回调函数
接受的第一个参数可以是以下几种类型:
响应式引用：例如 ref、computed 创建的引用。
getter 函数：一个返回响应式值的函数。
数组：包含多个响应式引用或 getter 函数。
*/
// 监听data
watch(data, (newValue, oldValue) => {
/**
JS中对象和数组是通过引用传递的，而不是通过值传递
当修改对象或数组的值时，实际上修改的是对象或数组的引用，而不是创建一个新的对象或数组
所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值
*/
console.log("oldValue", oldValue, "newValue", newValue)
if (newValue.year == "2025") {
console.log("2025")
}
if (newValue.month == '11') {
console.log("11")
}
})
// 监听 data 中的某个属性 year
watch(() => data.year, (newValue, oldValue) => {
console.log("oldValue", oldValue, "newValue", newValue)
if (data.year == "2024") {
console.log("2024")
}
})
return {
hobby,
data
}
}
}).mount("#app")
</script>
</body>
</html>
自动侦听器 watchEffect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 渲染数据：v-text和v-html -->
<div id="app">
爱好
<select v-model="hobby">
<option value="">请选择</option>
<option value="1">画画</option>
<option value="2">运动</option>
<option value="3">玩游戏</option>
</select>
<hr>
年
<select v-model="data.year">
<option value="">请选择</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
<hr>
月
<select v-model="data.month">
<option value="">请选择</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<script type="module">
import { createApp, ref, reactive, watchEffect } from './vue.esm-browser.js'
createApp({
setup() {
const hobby = ref("") // 爱好
const data = reactive({
year: '2022',
month: '10'
})
// 自动监听
// 建议手动监听
watchEffect(() => {
console.log("----- 监听开始")
if (hobby.value == "1") {
console.log('画画')
}
if (data.year == '2025') {
console.log("2025")
}
if (data.month == '12') {
console.log("12")
}
console.log("----- 监听结束")
})
return {
hobby,
data
}
}
}).mount("#app")
</script>
</body>
</html>
图片轮播案例记事本案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>{{ number }}</h3>
<img :src=`./imgs/${number}.jpg` style="width: 300px;"> <hr>
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
<hr>
<ul>
<li v-for="value in 3">
<a href="#" @click="jump(value)">{{ value }}</a>
</li>
</ul>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const number = ref(1)
const prev = () => {
number.value--
if (number.value == 0) {
number.value = 3
}
}
const next = () => {
number.value++
if (number.value == 4) {
number.value = 1
}
}
// 跳转
const jump = (value) => {
number.value = value
}
return {
number,
next,
prev,
jump
}
}
}).mount("#app")
</script>
</body>
</html>
以上内容基本涉及了vue3的一些基础语法知识。
