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>javascript">// 去掉前面的Vue.// 使用的一种结构赋值语法，将vue对象中的createApp和reactive的属性赋值给createApp和reactive变量// Vue本身就是一个对象，而且createApp和reactive和Vue里面存在的属性一致，所有可以精确的解包const {createApp,reactive} = VuecreateApp({// 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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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">javascript">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 函数。*/// 监听datawatch(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 中的某个属性 yearwatch(() => 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">javascript">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">javascript">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的一些基础语法知识。
