三个小时学完vue3（一）

大连密封材料  金牌会员 | 8 小时前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 816|帖子 816|积分 2448

Vue3

之前就学过一些，不过用的比较少，基本忘完了/(ㄒoㄒ)/~~
跟着B站视频迅速回忆一下
创建一个Vue 3 应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="vue.global.js"></script>
  8. </head>
  10. <!-- vue3 学习： 创建一个vue3应用 -->
  11. <body>
  12.     <div id="app">
  13.         <!-- 插值表达式 -->
  14.         <!-- 可以获取到msg的值 -->
  15.         {{ msg }}
  18.         <h2>{{ web.title }}</h2>
  19.         <h2>{{ web.url }}</h2>
  20.     </div>
  21.    
  22.     <script>
  23.         // 去掉前面的Vue.
  24.         // 使用的一种结构赋值语法，将vue对象中的createApp和reactive的属性赋值给createApp和reactive变量
  25.         // Vue本身就是一个对象，而且createApp和reactive和Vue里面存在的属性一致，所有可以精确的解包
  26.         const {createApp,reactive} = Vue
  27.         createApp({
  28.             // setup选项， 用于设置响应式数据和方法等
  29.             setup(){
  30.                 // 定义一个应用网站
  31.                 const web = reactive({
  32.                     title: "zzz学习编程",
  33.                     url: "baidu.com"
  34.                 })
  36.                 return {
  37.                     msg: "success",
  38.                     web
  39.                 }
  40.             }
  41.         }).mount("#app") // 挂载
  43.         // Vue.createApp({
  44.         //     // setup选项， 用于设置响应式数据和方法等
  45.         //     setup(){
  46.         //         // 定义一个应用网站
  47.         //         const web = Vue.reactive({
  48.         //             title: "zzz学习编程",
  49.         //             url: "baidu.com"
  50.         //         })
  52.         //         return {
  53.         //             msg: "success",
  54.         //             web
  55.         //         }
  56.         //     }
  57.         // }).mount("#app") // 挂载
  58.     </script>
  59. </body>
  60. </html>
复制代码
Vue 3 模块化开发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         {{msg}}
  13.         <h2>
  14.             {{web.title}}
  15.         </h2>
  16.         <h2>
  17.             {{web.url}}
  18.         </h2>
  19.     </div>
  21.     <!-- 添加属性：type="module" -->
  22.     <script type="module">
  23.         import {createApp, reactive} from './vue.esm-browser.js'
  24.         // 无法显示: 需要安装插件 live server（使用本地服务器进行调试）
  26.         createApp({
  27.             setup() {
  28.                 const web = reactive({
  29.                     title: "zz",
  30.                     url: "XXX.com"
  31.                 })
  33.                 return {
  34.                     msg: 'success',
  35.                     web
  36.                 }
  37.             }
  38.         }).mount("#app") // 挂载
  39.     </script>
  40. </body>
  41. </html>
复制代码
ref和reactive区别

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!--
  10.         ref 和 reactive 的区别：
  11.         ref用于存储单个基本类型的数据,如:数字、字符串等使用
  12.         ref创建的响应式对象,需要通过,value属性来访问和修改其值
  13.         
  14.         reactive用于存储复杂数据类型,如:对象或数组等
  15.     -->
  17.     <div id="app">
  18.         {{msg}}
  20.         <h2>{{ web.title }}</h2>
  21.         <h2>{{ web.url }}</h2>
  22.         <h2>{{ number }}</h2>
  23.     </div>
  25.     <script type="module">
  26.         import {createApp, reactive, ref} from './vue.esm-browser.js'
  28.         createApp({
  29.             setup() {
  30.                 // ref 和 reactive 的区别
  31.                 // const number = ref(10)
  32.                 // ref 修改number的值(使用.value)
  33.                 // number.value = 20
  35.                 // 定义一个数组
  36.                 const number = ref([1, 2, 3])
  38.                 const web = reactive({
  39.                     title: "zz",
  40.                     url: 'xxx.com'
  41.                 })
  42.                 // reactive修改值，直接修改
  43.                 web.url = 'baidu.com'
  45.                 return {
  46.                     msg: 'ref 和 reactive 的区别',
  47.                     web,
  48.                     number
  49.                 }
  50.             }
  51.         }).mount("#app")
  52.     </script>
  53. </body>
  54. </html>
复制代码
绑定变乱v-on和按键修饰符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!--
  10.         绑定事件 v-on
  11.         最常用的是click事件
  12.     -->
  13.     <div id="app">
  14.         {{ msg }}
  16.         <h2>{{ web.url }}</h2>
  17.         <h2>{{ web.user }}</h2>
  20.         <!-- 定义按钮 -->
  21.         <button v-on:click="edit">修改</button><br>
  22.         <button @click="edit">修改-简写</button> <hr>
  24.         按回车键： <input type="text" @:keyup.enter="add(40, 60)"><hr>
  25.         空格：<input type="text" @keyup.space="add(20, 30)"><hr>
  26.         <!-- 使用tab 使用：@keydown -->
  27.         Tab: <input type="text" @keydown.tab="add(10, 20)"><hr>
  28.         w: <input type="text" @keyup.w="add(1, 2)"><hr>
  30.         <!-- 组合快捷键 -->
  31.         Ctrl + enter: <input type="text" @keyup.ctrl.enter="add(3, 4)"><hr>
  32.         Ctrl + A: <input type="text" @keyup.ctrl.a="add(4, 5)"><hr>
  33.     </div>
  36.     <script type="module">
  37.         import { createApp, reactive } from './vue.esm-browser.js'
  39.         createApp({
  40.             setup() {
  41.                 const web = reactive({
  42.                     url: "baidu.com",
  43.                     user: 0
  44.                 })
  45.                 // 修改网站网址
  46.                 const edit = () => {
  47.                     web.url = "www.zzzz.com"
  48.                 }
  50.                 const add = (a, b) => {
  51.                     // 假设有两个网站（a和b）
  52.                     // 统计这两个网站用户的新增数量
  53.                     web.user += a + b
  54.                 }
  56.                 return {
  57.                     msg: 'success',
  58.                     web,
  59.                     edit,
  60.                     add
  61.                 }
  62.             }
  63.         }).mount("#app")
  64.     </script>
  65. </body>
  66. </html>
复制代码
显示和隐藏 v-show

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         {{ web.show }} <hr>
  12.         <!-- 一段文字的显示和隐藏 -->
  13.         <p v-show="web.show">
  14.             zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
  15.         </p>
  17.         <button @click="toggle">切换显示状态</button>
  18.     </div>
  20.     <script type="module">
  21.         import { createApp, reactive } from './vue.esm-browser.js'
  23.         createApp({
  24.             setup() {
  25.                 const web = reactive({
  26.                     show: true
  27.                 })
  29.                 //
  30.                 const toggle = () => {
  31.                     web.show = !web.show
  32.                 }
  33.                
  34.                 return {
  35.                     web,
  36.                     toggle
  37.                 }
  38.             }
  39.         }).mount("#app")
  40.     </script>
  41. </body>
  42. </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：适用于在运行时条件很少改变的场景，例如根据用户的权限来决定是否显示某个功能按钮。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         {{ web.show }} <hr>
  12.         <!-- 一段文字的显示和隐藏 -->
  13.         <p v-show="web.show">
  14.             这是一段文字
  15.         </p>
  17.         <p v-if="web.show">
  18.             这也是一段文字
  19.         </p>
  21.         <button @click="toggle">切换显示状态</button>
  23.         <p v-if="web.user < 1000">新网站</p>
  24.         <p v-else-if="web.user >= 1000 && web.user <= 10000">优秀网站</p>
  25.         <p v-else>资深网站</p>
  26.     </div>
  28.     <script type="module">
  29.         import { createApp, reactive } from './vue.esm-browser.js'
  31.         createApp({
  32.             setup() {
  33.                 const web = reactive({
  34.                     show: true,
  35.                     user: 15000
  36.                 })
  38.                 //
  39.                 const toggle = () => {
  40.                     web.show = !web.show
  41.                 }
  42.                
  43.                 return {
  44.                     web,
  45.                     toggle
  46.                 }
  47.             }
  48.         }).mount("#app")
  49.     </script>
  50. </body>
  51. </html>
复制代码
动态属性绑定 v-bind

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .textColor {
  9.             color: blue;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.         <!-- :value -->
  16.         <h3>value="zz.com"</h3>
  17.         <input type="text" value="zz.com">
  19.         <h3>v-bind:value="zz.com"</h3>
  20.         <input type="text" v-bind:value="web.url">
  21.         <!-- 简写 -->
  22.         <h3>:value="zz.com"</h3>
  23.         <input type="text" :value="web.url">
  25.         <!-- :src -->
  26.         <h3>src="pic.jpg"</h3>
  27.         <img src="pic.jpg" style="width: 100px;">
  29.         <h3>src="pic.jpg"</h3>
  30.         <img :src="web.img" style="width: 100px;">
  32.         <!-- :class -->
  33.         <h3>class="textcolor"</h3>
  34.         <p class="textColor">zzz学习</p>
  35.         
  36.         <!-- 动态绑定class属性 -->
  37.         <h3>class="textcolor"</h3>
  38.         <p :class="{textColor: web.fontStatus}">zzz学习</p>
  39.     </div>
  41.     <script type="module">
  42.         import { createApp, reactive } from './vue.esm-browser.js'
  44.         createApp({
  45.             setup() {
  46.                 const web = reactive({
  47.                     url: 'zz.com',
  48.                     img: 'pic.jpg',
  49.                     fontStatus: false
  50.                 })
  52.                 return {
  53.                     web
  54.                 }
  55.             }
  56.         }).mount("#app")
  57.     </script>
  58. </body>
  59. </html>
复制代码
遍历数组或对象 v-for

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 遍历数组或对象 -->
  10.     <div id="app">
  11.         <ul>
  12.             <li v-for="value in data.number">
  13.                 {{ value }}
  14.             </li>
  15.         </ul>
  17.         <!-- 数组遍历索引使用 index -->
  18.         <ul>
  19.             <li v-for="(value, index) in data.number">
  20.                 index ==> {{ index }}: value ==> {{ value }}
  21.             </li>
  22.         </ul>
  25.         <!-- 对象遍历索引使用key -->
  26.         <ul>
  27.             <li v-for="(value, key) in data.user">
  28.                 key ==> {{ key }}: value ==> {{ value }}
  29.             </li>
  30.         </ul>
  33.         <ul>
  34.             <li v-for="(value, key, index) in data.user">
  35.                 index ==> {{ index }}: keye ==> {{ key }}: value ==> {{ value }}
  36.             </li>
  37.         </ul>
  39.         <!-- 关于 template 更完整的说法：Vue会编译<template>里的内容，但是不会将其作为 DOM元素 渲染到页面上 -->
  40.         <ul>
  41.             <template v-for="(value, key, index) in data.user">
  42.                 <li v-if="index === 1">
  43.                     index ==> {{ index }}: keye ==> {{ key }}: value ==> {{ value }}
  44.                 </li>
  45.             </template>
  46.         </ul>
  48.         <ul>
  49.             <!-- 动态属性value key -->
  50.             <li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">
  51.                 index ==> {{ index }}: value.id ==> {{ value.id }}: value.name ==> {{ value.name }}: value.web ==> {{ value.web }}
  52.             </li>
  53.         </ul>
  54.     </div>
  56.     <script type="module">
  57.         import { createApp, reactive } from './vue.esm-browser.js'
  59.         createApp({
  60.             setup() {
  61.                 const data = reactive({
  62.                     number: ['10', '11', '12'], // 数组
  63.                     user: {
  64.                         // 对象
  65.                         name: 'zzz',
  66.                         gender: '女'
  67.                     },
  68.                     teacher: [ // 包含两个对象的数组
  69.                         { id: 100, name: '张三', web: 'zhangsan.com' },
  70.                         { id: 101, name: '李四', web: 'lisi.com' }
  71.                     ]
  72.                 })
  74.                 return {
  75.                     data
  76.                 }
  77.             }
  78.         }).mount("#app")
  79.     </script>
  80. </body>
  81. </html>
复制代码
双向数据绑定 v-model

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 之前学的v-bind（语法糖 :）是单向绑定 -->
  10.     <!-- v-model双向绑定 -->
  11.     <div id="app">
  12.         <h3>文本框：{{ data.text }}</h3>
  13.         <h3>单选框{{ data.radio }}</h3>
  14.         <h3>复选框：{{ data.checkbox }}</h3>
  15.         <h3>记住密码：{{ data.remember }}</h3>
  16.         <h3>下拉框：{{ data.select }}</h3>
  17.         <h3>下拉框：{{ data.select.join(',') }}</h3>
  19.         <!-- 单向数据绑定：当数据发送改变时， 视图会自动更新，但用户手动更改 input 的值，数据不会更新 -->
  20.         单向数据绑定： <input type="text" :value="data.text">
  22.         <hr>
  23.         <!--
  24.             双向数据绑定：当数据发生改变时，视图会自动更新，当用户手动更改input 的值，数据也会自动更新
  25.             对于<input type="text"> v-model绑定的是 input 元素的value值
  26.         -->
  27.         双向数据绑定： <input type="text" v-model="data.text">
  28.         <hr>
  30.         <!--
  31.             单选框
  32.             对于<input type="radio"> v-model绑定的是 input 元素的选中状态
  33.          -->
  34.         <input type="radio" v-model="data.radio" value="1">写作
  35.         <input type="radio" v-model="data.radio" value="2">画画
  37.         <hr>
  39.         <!--
  40.             复选框
  41.             对于 <input type="checkbox"> v-model绑定的是 input 元素的选择状态
  42.         -->
  43.         <input type="checkbox" v-model="data.checkbox" value="a">写作
  44.         <input type="checkbox" v-model="data.checkbox" value="b">画画
  45.         <input type="checkbox" v-model="data.checkbox" value="cc">运动
  47.         <hr>
  48.         <!--
  49.             单个复选框（记住密码）
  50.         -->
  51.         <input type="checkbox" v-model="data.remember">记住密码
  53.         <hr>
  54.         <!-- 下拉框 -->
  55.         <select v-model="data.select">
  56.             <option value="">请选择</option>
  57.             <option value="A">写作</option>
  58.             <option value="B">画画</option>
  59.             <option value="C">运动</option>
  60.         </select>
  61.         <hr>
  62.         <select v-model="data.select" multiple>
  63.             <option value="">请选择</option>
  64.             <option value="A">写作</option>
  65.             <option value="B">画画</option>
  66.             <option value="C">运动</option>
  67.         </select>
  68.     </div>
  70.     <script type="module">
  71.         import { createApp, reactive } from './vue.esm-browser.js'
  73.         createApp({
  74.             setup() {
  75.                 const data = reactive({
  76.                     text: "zzz.com", // 文本框
  77.                     radio: "", // 单选
  78.                     checkbox: [], // 复选框
  79.                     remember: false, // 单个复选框- 记住密码
  80.                     // select: "" // 下拉框
  81.                     select: [] // 下拉框
  82.                 })
  84.                 return {
  85.                     data
  86.                 }
  87.             }
  88.         }).mount("#app")
  89.     </script>
  90. </body>
  91. </html>
复制代码
v-model修饰符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!-- v-model修饰符  -->
  11.         <h3>url: {{ data.url }}</h3>
  12.         <h3>user: {{ data.user }}</h3>
  14.         实时渲染：<input type="text" v-model="data.url"><br>
  15.         失去焦点或按下回车之后在进行渲染： <input type="text" v-model.lazy="data.url"><br>
  16.         
  17.         <!-- 输入 100人， web.user 的值仍为 100 -->
  18.          <!-- 不是完全控制 -->
  19.         输入框的值转换为数字类型： <input type="text" v-model.number="data.user"><br>
  21.         <!-- trim：感觉这个在项目中还是比较常用的 -->
  22.         去掉首尾空格：<input type="text" v-model.trim="data.user">
  23.     </div>
  25.     <script type="module">
  26.         import { createApp, reactive } from './vue.esm-browser.js'
  28.         createApp({
  29.             setup() {
  30.                 const data = reactive({
  31.                     url: 'zz.com',
  32.                     user: 10
  33.                 })
  35.                 return {
  36.                     data
  37.                 }
  38.             }
  39.         }).mount("#app")
  40.     </script>
  41. </body>
  42. </html>
复制代码
渲染数据 v-text 和 v-html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 渲染数据：v-text和v-html -->
  10.     <div id="app">
  11.         <h3>{{ data.title }}</h3>
  13.         <!-- 使用v-text -->
  14.         <h3 v-text="data.title"></h3>
  16.         <!-- 使用v-html -->
  17.          <!-- 解析html标签 -->
  18.         <h3 v-html="data.url"></h3>  <!-- www.baidu.com -->
  19.         <!-- 直接输出内容 -->
  20.         <h3 v-text="data.url"></h3> <!-- <i style='color:blue;'>www.baidu.com</i> -->
  21.     </div>
  23.     <script type="module">
  24.         import { createApp, reactive } from './vue.esm-browser.js'
  26.         createApp({
  27.             setup() {
  28.                 const data = reactive({
  29.                     title: 'zzzzz',
  30.                     url: "<i style='color:blue;'>www.baidu.com</i>",
  31.                 })
  33.                 return {
  34.                     data
  35.                 }
  36.             }
  37.         }).mount("#app")
  38.     </script>
  39. </body>
  40. </html>
复制代码
计算属性 computed

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 渲染数据：v-text和v-html -->
  10.     <div id="app">
  11.         <h3>add: {{ add() }}</h3>
  12.         <h3>add: {{ add() }}</h3>
  14.         <h3>sub: {{ sub }}</h3>
  15.         <h3>sub: {{ sub }}</h3>
  17.         x: <input type="text" v-model.number="data.x">
  18.         y: <input type="text" v-model.number="data.y">
  19.     </div>
  21.     <script type="module">
  22.         import { createApp, reactive, computed } from './vue.esm-browser.js'
  24.         createApp({
  25.             setup() {
  26.                 const data = reactive({
  27.                     x: 10,
  28.                     y: 20
  29.                 })
  31.                 // 方法 - 无缓存
  32.                 let add = () => {
  33.                     console.log("add") // 打印两次
  34.                     return data.x + data.y
  35.                 }
  37.                 // 计算属性： 有缓存
  38.                 // 直接返回缓存值
  39.                 // 当计算数学以来的响应数据发生变化时才会更新
  40.                 const sub = computed(() => {
  41.                     console.log("sub")
  42.                     return data.x - data.y
  43.                 })
  45.                 return {
  46.                     data,
  47.                     add,
  48.                     sub
  49.                 }
  50.             }
  51.         }).mount("#app")
  52.     </script>
  53. </body>
  54. </html>
复制代码
侦听器 watch

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 渲染数据：v-text和v-html -->
  10.     <div id="app">
  11.         爱好
  12.         <select v-model="hobby">
  13.             <option value="">请选择</option>
  14.             <option value="1">画画</option>
  15.             <option value="2">运动</option>
  16.             <option value="3">玩游戏</option>
  17.         </select>
  19.         <hr>
  21.         年
  22.         <select v-model="data.year">
  23.             <option value="">请选择</option>
  24.             <option value="2022">2022</option>
  25.             <option value="2023">2023</option>
  26.             <option value="2024">2024</option>
  27.             <option value="2025">2025</option>
  28.         </select>
  30.         <hr>
  31.         月
  32.         <select v-model="data.month">
  33.             <option value="">请选择</option>
  34.             <option value="10">10</option>
  35.             <option value="11">11</option>
  36.             <option value="12">12</option>
  37.             <option value="13">13</option>
  38.         </select>
  39.     </div>
  41.     <script type="module">
  42.         import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
  44.         createApp({
  45.             setup() {
  46.                 const hobby = ref("") // 爱好
  47.                 const data = reactive({
  48.                     year: '2022',
  49.                     month: '10'
  50.                 })
  52.                 watch(hobby, (newValue, oldValue) => {
  53.                     // console.log('newValue: ', newValue, 'oldValue:', oldValue)
  54.                     if (newValue === '1') {
  55.                         console.log('画画')
  56.                     }
  57.                 })
  59.                 /*
  60.                     watch 函数用于响应式地监听一个或多个数据源，并在数据源发生变化时执行回调函数
  61.                     接受的第一个参数可以是以下几种类型:
  62.                         响应式引用：例如 ref、computed 创建的引用。
  63.                         getter 函数：一个返回响应式值的函数。
  64.                         数组：包含多个响应式引用或 getter 函数。
  65.                 */
  66.                 // 监听data
  67.                 watch(data, (newValue, oldValue) => {
  68.                     /**
  69.                         JS中对象和数组是通过引用传递的，而不是通过值传递
  70.                         当修改对象或数组的值时，实际上修改的是对象或数组的引用，而不是创建一个新的对象或数组
  71.                         所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值
  72.                      */
  74.                     console.log("oldValue", oldValue, "newValue", newValue)
  76.                     if (newValue.year == "2025") {
  77.                         console.log("2025")
  78.                     }
  80.                     if (newValue.month == '11') {
  81.                         console.log("11")
  82.                     }
  83.                 })
  85.                 // 监听 data 中的某个属性 year
  86.                 watch(() => data.year, (newValue, oldValue) => {
  87.                     console.log("oldValue", oldValue, "newValue", newValue)
  89.                     if (data.year == "2024") {
  90.                         console.log("2024")
  91.                     }
  92.                 })
  93.                
  94.                 return {
  95.                     hobby,
  96.                     data
  97.                 }
  98.             }
  99.         }).mount("#app")
  100.     </script>
  101. </body>
  102. </html>
复制代码
主动侦听器 watchEffect

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 渲染数据：v-text和v-html -->
  10.     <div id="app">
  11.         爱好
  12.         <select v-model="hobby">
  13.             <option value="">请选择</option>
  14.             <option value="1">画画</option>
  15.             <option value="2">运动</option>
  16.             <option value="3">玩游戏</option>
  17.         </select>
  19.         <hr>
  21.         年
  22.         <select v-model="data.year">
  23.             <option value="">请选择</option>
  24.             <option value="2022">2022</option>
  25.             <option value="2023">2023</option>
  26.             <option value="2024">2024</option>
  27.             <option value="2025">2025</option>
  28.         </select>
  30.         <hr>
  31.         月
  32.         <select v-model="data.month">
  33.             <option value="">请选择</option>
  34.             <option value="10">10</option>
  35.             <option value="11">11</option>
  36.             <option value="12">12</option>
  37.         </select>
  38.     </div>
  40.     <script type="module">
  41.         import { createApp, ref, reactive, watchEffect } from './vue.esm-browser.js'
  43.         createApp({
  44.             setup() {
  45.                 const hobby = ref("") // 爱好
  46.                 const data = reactive({
  47.                     year: '2022',
  48.                     month: '10'
  49.                 })
  51.                 // 自动监听
  52.                 // 建议手动监听
  53.                 watchEffect(() => {
  54.                     console.log("----- 监听开始")
  56.                     if (hobby.value == "1") {
  57.                         console.log('画画')
  58.                     }
  60.                     if (data.year == '2025') {
  61.                         console.log("2025")
  62.                     }
  64.                     if (data.month == '12') {
  65.                         console.log("12")
  66.                     }
  68.                     console.log("----- 监听结束")
  69.                 })
  71.                 return {
  72.                     hobby,
  73.                     data
  74.                 }
  75.             }
  76.         }).mount("#app")
  77.     </script>
  78. </body>
  79. </html>
复制代码
图片轮播案例记事本案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <h3>{{ number }}</h3>
  12.         <img :src=`./imgs/${number}.jpg` style="width: 300px;"> <hr>
  13.         <button @click="prev">上一张</button>
  14.         <button @click="next">下一张</button>
  16.         <hr>
  17.         <ul>
  18.             <li v-for="value in 3">
  19.                 <a href="#" @click="jump(value)">{{ value }}</a>
  20.             </li>
  21.         </ul>
  22.     </div>
  24.     <script type="module">
  25.         import { createApp, reactive, ref } from './vue.esm-browser.js'
  27.         createApp({
  28.             setup() {
  29.                 const number = ref(1)
  31.                 const prev = () => {
  32.                     number.value--
  34.                     if (number.value == 0) {
  35.                         number.value = 3
  36.                     }
  37.                 }
  39.                 const next = () => {
  40.                     number.value++
  42.                     if (number.value == 4) {
  43.                         number.value = 1
  44.                     }
  45.                 }
  47.                 // 跳转
  48.                 const jump = (value) => {
  49.                     number.value = value
  50.                 }
  52.                 return {
  53.                     number,
  54.                     next,
  55.                     prev,
  56.                     jump
  57.                 }
  58.             }
  59.             
  60.         }).mount("#app")
  61.     </script>
  62. </body>
  63. </html>
复制代码
以上内容基本涉及了vue3的一些底子语法知识。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大连密封材料

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表