web基础07-Vue

目录

一、Vue

1.概述

2.MVC与MVVM

3.快速入门

4.Vue工程的创建

(1)基于vue-cli

(2)基于Vite(推荐)

5.Vue3核心语法

6.setup

(1)概述

(2)返回值方式

(3)setup与选项式

(4)语法糖

7.响应式数据

(1)ref:基本类型和对象类型

(2)reactive:只能定义对象类型(深层次)

(3)区别

(4)使用场景

(5)toRef和toRefs

8.计算:computed

9.监视:watch

(1)监视ref定义的【基本类型】数据

(2)监视ref定义的【对象类型】数据

(3)监视reactive定义的【对象类型】数据,且默认开启了深度监视(无法关闭)。

(4)监视ref或reactive定义的【对象类型】数据中的某个属性

(5)监视上述的多个数据

10.自动监视:watchEffect

11.标签的ref属性

12.使用ts规范js

13.组件间值的传递和接收及接收数据类型的限制和默认值设置

14.常用指令

15.生命周期

(1)概念

(2)Vue2

(3)Vue3

16.模块化数据和方法:hooks

17.路由

(1)路由器理解

(2)路由切换

(3)路由器工作模式

(4)路由命名

(5)嵌套路由

(6)路由重定向

18.路由传参

(1)Query参数

(2)Params参数

19.路由的props配置

20.路由Replace属性

(1)作用:

(2)浏览器的历史记录两种写入方式:

(3)开启replace模式:

21.编程式路由导航

(1)概述

(2)案例

22.Vue3的状态管理工具-Pinia

(1)概述

(2)搭建pinia环境

(3)使用

(4)读取优化

(5)数据再加工getters

(6)监视state及其数据变化:.$subscribe

(7)store组合式写法

23.组件通信

(1)props:父组件<=>子组件

(2)自定义事件:子 => 父

(3)mitt:任意

(4)v-model:父 <=> 子

(5)$attrs:祖 => 中转 => 孙

(6)$refs和$parent :父 <=> 子

(7)provide和inject:祖 <=> 孙

(8)pinia

24.插槽

(1)默认插槽

(2)具名插槽

(3)作用域插槽

25.其他API

(1)shallowRef 与 shallowReactive

(2)readonly 与 shallowReadonly

(3)更多


一、Vue

1.概述

Vue 是一套前端框架

免除原生JavaScript中的DOM操作,简化书写

基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上

官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js

2.MVC与MVVM

3.快速入门

一定要注意看一下自己要用什么版本的Vue

介绍 — Vue.js (vuejs.org),官网有教程,我就不写了

如果官网教程看不懂,看这个,Vue3需要一点Vue2基础

尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程哔哩哔哩bilibili

4.Vue工程的创建

(1)基于vue-cli

点击查看官方文档

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
​
## 安装或者升级你的@vue/cli 
npm install -g @vue/cli
​
## 执行创建命令
vue create vue_test
​
##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x
​
## 启动
cd vue_test
npm run serve

(2)基于Vite(推荐)

Vite中文网

## 1.创建命令
npm create vue@latest
​
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  No
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

注意:初学就不要根据图开启ESLint和Prettier了,根据上方文字整

使用IDEA或vsCode(其他也可)打开项目

vscode使用ctrl+换出控制台

不习惯英文的话使用下载一些插件

配合下图设置一下即可

如果有报错解决之后还有红色波浪,优先重启vsCode一下

挂载:将vue组件装入Vue容器并加载

Vue3支持Vue2语法!

这里主要写Vue3

杂项:

Component name "XXX" should always be multi-word :

解决:

在.eslintrc.cjs中添加

rules: { 
    "vue/multi-word-component-names": "off"
  },

之后重启vscode即可

5.Vue3核心语法

vue2:选项式API(Options)

<template>
  <div class="person">
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
​
<script lang="ts">
  export default {
    name:'App',
    data() {
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      },
      showTel(){
        alert(this.tel)
      }
    },
  }
</script>

App.vue:

<template>
  <!--  只能有一个根节点-->
  <div>
    <Demo01/>
  </div>
</template>
​
<script lang="ts">
import Demo01 from "@/components/Demo01.vue";
export default {
  name:"App",
  components:{Demo01}
}
</script>

Vue3:组合式API(Composition)

<template>
  <div class="person">
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
​
<script lang="ts">
  export default {
    name:'Person',
    setup(){
      
      // 数据,原来写在data中(注意:此时的name、age、tel数据都不是响应式数据)
      let name = '张三'
      let age = 18
      let tel = '13888888888'
​
      // 方法,原来写在methods中
      //setup函数中的this是undefined
      function changeName(){
        name = 'zhang-san' //注意:此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意:此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }
​
      // 返回一个对象,对象中的内容,模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

App.vue

<template>
<!--  可多个根节点-->
    <Demo01/>
    <Demo01/>
</template>
​
<script lang="ts" setup name="App">
  import Demo01 from "@/components/Demo01.vue";
</script>

main.ts

import { createApp } from 'vue'
import App from './App.vue'
​
//创建Vue应用,并将app组件装在Vue应用上
const app = createApp(App)
​
//将id为app的节点挂载到Vue应用上
app.mount('#app')

6.setup

(1)概述

setup是Vue3中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup中。

(2)返回值方式

第一种(常用):

return{值,方法,键值对...}
//1.属性值
return{name,age,tel}
//2.方法
return{changeName,changeAge,showTel}
//3.键值对
return{key01:value01,key02:value02}
//4.混合
return {name,age,tel,changeName,changeAge,showTel}

第二种:渲染函数

return ()=> "hh"

(3)setup与选项式
  • 可同时存在

  • 由于setup执行时机比所有钩子函数早,选项式是可以读取setup里面的数据的,但不能反向读取

(4)语法糖

setup函数有一个语法糖,这个语法糖,可以让我们把setup独立出去

<template>
  <div class="person">
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
​
<script lang="ts">
  export default {
    name:'Person',
  }
</script>
​
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据(注意:此时的name、age、tel都不是响应式数据)
  let name = '张三'
  let age = 18
  let tel = '13888888888'
​
  // 方法
  function changName(){
    name = '李四'//注意:此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意:此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

如果想要组合写需要插件支持

npm i vite-plugin-vue-setup-extend -D 

如果报错使用下面命令【仅限版本错误】

npm i vite-plugin-vue-setup-extend -D --legacy-peer-deps

vite.config.ts中引入插件即可

import VueExtend from 'vite-plugin-vue-setup-extend'
plugins: [
    vue(),
    VueExtend()
],

组合代码如下

<script setup lang="ts" name="组件名">
  console.log(this) //undefined
  
  // 数据(注意:此时的name、age、tel都不是响应式数据)
  let name = '张三'
  let age = 18
  let tel = '13888888888'
​
  // 方法
  function changName(){
    name = '李四'//注意:此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意:此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

7.响应式数据

(1)ref:基本类型和对象类型

基本类型

<script setup lang="ts" name="Demo01">
import {ref, Ref} from "vue";
​
console.log(this) //undefined
​
let name = ref('张三')
let age = ref(18)
let tel = '13888888888'
​
// 方法
function changName(){
  name.value = '李四'
}
function changAge(){
  console.log(age)
  age.value += 1 
}
function showTel(){
  alert(tel)
}
</script>

也可以是对象类型,底层实现还是reactive

<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
​
<script setup lang="ts" name="Demo01">
import {ref} from "vue";
let person = ref({name:"张三",age:18,tel:"13888888888"})
// 方法
function changName(){
  person.value.name = '李四'
}
function changAge(){
​
  person.value.age += 1 
}
function showTel(){
  alert(person.value.tel)
}
</script>

(2)reactive:只能定义对象类型(深层次)
<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
​
<script setup lang="ts" name="Demo01">
import {reactive} from "vue";
​
console.log(this) //undefined
​
// 数据(注意:此时的name、age、tel都不是响应式数据)
let person = reactive({name:"张三",age:18,tel:"13888888888"})
​
// 方法
function changName(){
  person.name = '李四'//注意:此时这么修改name页面是不变化的
}
function changAge(){
​
  person.age += 1 //注意:此时这么修改age页面是不变化的
}
function showTel(){
  alert(person.tel)
}
</script>

(3)区别
  • ref用来定义:基本类型数据对象类型数据

  • reactive用来定义:对象类型数据

  • ref创建的变量必须使用.value

  • reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换【不会修改对象地址值!】)。

(4)使用场景
  • 若需要一个基本类型的响应式数据,必须使用ref。

  • 若需要一个响应式对象,层级不深,ref、reactive都可以。

  • 若需要一个响应式对象,且层级较深,推荐使用reactive。

(5)toRef和toRefs
  • 作用:将一个响应式对象中的每一个属性,转换为ref对象。

  • 备注:toRefs与toRef功能一致,但toRefs可以批量转换。

<template>
  <div class="person">
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>性别:{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'
​
  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
    
  // 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
    
  // 通过toRef将person对象中的gender属性取出,且依然保持响应式的能力
  let age = toRef(person,'age')
​
  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

8.计算:computed

根据已有数据计算出新数据

<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名:<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为:li-si</button>
  </div>
</template>
​
<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'
​
  let firstName = ref('zhang')
  let lastName = ref('san')
​
  // 计算属性——只读取,不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */
​
​
  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })
​
  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>

9.监视:watch

监视数据的变化

Vue3中只能监视以下四种数据

  • ref定义的数据。

  • reactive定义的数据。

  • 函数返回一个值(getter函数)。

  • 一个包含上述内容的数组。

在Vue3中使用watch的时候,通常会遇到以下几种情况:

(1)监视ref定义的【基本类型】数据

直接写数据名即可,监视的是其value值的改变。

<template>
  <div class="person">
    <h1>情况一:监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为:{{sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视,情况一:监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch()
    }
  })
</script>

(2)监视ref定义的【对象类型】数据

直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。

  • 若修改的是ref定义的对象中的属性,newValue 和 oldValue 都是新值,因为它们是同一个对象。

  • 若修改整个ref定义的对象,newValue 是新值, oldValue 是旧值,因为不是同一个对象了。

<template>
  <div class="person">
    <h1>情况二:监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  /* 
    监视,情况一:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视
    watch的第一个参数是:被监视的数据
    watch的第二个参数是:监视的回调
    watch的第三个参数是:配置对象(deep【内部参数修改就执行】、immediate【立即执行一次监视】等等.....) 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{deep:true})
  
</script>

(3)监视reactive定义的【对象类型】数据,且默认开启了深度监视(无法关闭)。
<template>
  <div class="person">
    <h1>情况三:监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h2>测试:{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }
​
  // 监视,情况三:监视【reactive】定义的【对象类型】数据,且默认是开启深度监视的
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
</script>

(4)监视ref或reactive定义的【对象类型】数据中的某个属性
  • 若该属性值不是【对象类型】,需要写成函数形式。

  • 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。

<template>
  <div class="person">
    <h1>情况四:监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
​
  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }
​
  // 监视,情况四:监视响应式对象中的某个属性,且该属性是基本类型的,要写成函数式
  /* watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  }) */
​
  // 监视,情况四:监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,更推荐写函数
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
</script>

(5)监视上述的多个数据
<template>
  <div class="person">
    <h1>情况五:监视上述的多个数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
​
  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }
​
  // 监视,情况五:监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
​
</script>

10.自动监视:watchEffect

与watch区别:

  • 都能监听响应式数据的变化,不同的是监听数据变化的方式不同

  • watch:要明确指出监视的数据

  • watchEffect:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性),会立即执行一次

<template>
  <div class="person">
    <h1>需求:水温达到50℃,或水位达到20cm,则联系服务器</h1>
    <h2 id="demo">水温:{{temp}}</h2>
    <h2>水位:{{height}}</h2>
    <button @click="changePrice">水温+1</button>
    <button @click="changeSum">水位+10</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)
​
  // 方法
  function changePrice(){
    temp.value += 10
  }
  function changeSum(){
    height.value += 1
  }
​
  // 用watch实现,需要明确的指出要监视:temp、height
  watch([temp,height],(value)=>{
    // 从value中获取最新的temp值、height值
    const [newTemp,newHeight] = value
    // 室温达到50℃,或水位达到20cm,立刻联系服务器
    if(newTemp >= 50 || newHeight >= 20){
      console.log('联系服务器')
    }
  })
​
  // 用watchEffect实现,不用
  const stopWtach = watchEffect(()=>{
    // 室温达到50℃,或水位达到20cm,立刻联系服务器
    if(temp.value >= 50 || height.value >= 20){
      console.log(document.getElementById('demo')?.innerText)
      console.log('联系服务器')
    }
    // 水温达到100,或水位达到50,取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
</script>

11.标签的ref属性

  • 用在普通DOM标签【html标签】上,获取的是DOM节点。

  • 用在组件标签上,获取的是组件实例对象。

用在普通DOM标签上

<template>
  <div class="person">
    <h1 ref="title1">尚硅谷</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <input type="text" ref="inpt"> <br><br>
    <button @click="showLog">点我打印内容</button>
  </div>
</template>
​
<script lang="ts" setup name="Person">
  import {ref} from 'vue'
    
  let title1 = ref()
  let title2 = ref()
  let title3 = ref()
​
  function showLog(){
    // 通过id获取元素
    const t1 = document.getElementById('title1')
    // 打印内容
    console.log((t1 as HTMLElement).innerText)
    console.log((<HTMLElement>t1).innerText)
    console.log(t1?.innerText)
    
        /************************************/
        
    // 通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
    console.log(title3.value)
  }
</script>

用在组件标签上:

<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>
​
<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {ref} from 'vue'
​
  let ren = ref()
​
  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>
​
​
<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
    // 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>

12.使用ts规范js

ts:

// 定义一个接口,限制每个Person对象的格式
export interface PersonInter {
    id:string,
    name:string,
    age:number
}
​
// 定义一个自定义类型Persons
// export type Persons = PersonInter[];
export type Persons = Array<PersonInter>

js:

<template>
  <div class="person">
   ???
  </div>
</template>
​
<script lang="ts" setup name="Person">
​
import {type PersonInter} from '@/ts'
import {type Persons } from '@/ts';
let person:PersonInter = {id:'asyud7asfd01',name:'张三',age:60}
​
// let persons:Array<PersonInter> = 
//   [
//   {id:"123",name:"zhangsan",age:18},
//   {id:"125",name:"lisi",age:28},
//   {id:"126",name:"wangwu",age:26}
// ]
​
let persinList:Persons = [
  {id:"123",name:"zhangsan",age:18},
  {id:"125",name:"lisi",age:28},
  {id:"126",name:"wangwu",age:26}
]
​
</script>

13.组件间值的传递和接收及接收数据类型的限制和默认值设置

父类组件

<template>
 <!-- <h2 a="1+1" :b="1+1" c="x" :d="x" ref="qwe">测试</h2> -->
  <Person />
</template>
​
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import { reactive } from 'vue';
import {type Persons } from './ts'; 
// let x = 9;
​
let persinList = reactive<Persons>([
  {id:"123",name:"zhangsan",age:18},
  {id:"125",name:"lisi",age:28},
  {id:"126",name:"wangwu",age:26}
])
​
</script>

子类组件

<template>
<div class="person">
<ul>
  <li v-for="item in list" :key="item.id">
     {{item.name}}--{{item.age}}
   </li>
 </ul>
</div>
</template>
​
<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'
​
// 第一种写法:仅接收
// const props = defineProps(['list'])
​
// 第二种写法:接收+限制类型
// defineProps<{list:Persons}>()
​
// 第三种写法:接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>

defineXXX在vue3中称为宏函数,可不用引入

withDefaults只能与基于类型的defineProps声明一起使用,也可不用引入

14.常用指令

指令作用
v-bind:属性名或  :属性名为HTML标签绑定属性值(单向),如设置 href,css样式等
v-model在表单元素上创建双向数据绑定
v-on:事件类型/@事件类型=“方法名”为HTML标签绑定事件
v-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-for列表渲染,遍历容器的元素或者对象的属性

v-for:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div  v-for="number in lists">
        {{number}}<br>
    </div>
    <!--    带索引,从0开始-->
    <div  v-for="(number,i) in lists">
        {{i+1}}:{{number}}<br>
    </div>
</div>
​
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                lists:[1,2,3,4,5,6,7,8,9]
            }
        }
    })
</script>
</html>

注意:vue中列表循环需要加:key='唯一标识',唯一标识尽量是id

15.生命周期

(1)概念

Vue组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子

(2)Vue2

生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。

每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)

状态阶段周期
beforeCreate创建前
created创建后/完毕
beforeMount挂载/载入前
mounted挂载/载入完成,即Vue初始化成功,HTML页面渲染成功。
beforeUpdate更新前
updated更新后/完毕
beforeDestory销毁前
destoryed销毁后/完毕

(3)Vue3
  • Vue3的生命周期

    创建阶段:setup

    挂载阶段:onBeforeMount、onMounted

    更新阶段:onBeforeUpdate、onUpdated

    卸载阶段:onBeforeUnmount、onUnmounted

  • 常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

  • 示例代码:

<template>
  <div class="person">
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
​
<!-- vue3写法 -->
<script lang="ts" setup name="Person">
  import { 
    ref, 
    onBeforeMount, 
    onMounted, 
    onBeforeUpdate, 
    onUpdated, 
    onBeforeUnmount, 
    onUnmounted 
  } from 'vue'
​
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum() {
    sum.value += 1
  }
  console.log('setup')
  // 生命周期钩子
  onBeforeMount(()=>{
    console.log('挂载之前')
  })
  onMounted(()=>{
    console.log('挂载完毕')
  })
  onBeforeUpdate(()=>{
    console.log('更新之前')
  })
  onUpdated(()=>{
    console.log('更新完毕')
  })
  onBeforeUnmount(()=>{
    console.log('卸载之前')
  })
  onUnmounted(()=>{
    console.log('卸载完毕')
  })
</script>

16.模块化数据和方法:hooks

hooks:

usePic.ts

import { reactive } from "vue"
import axios from "axios";
​
​
export default function () {
    const picList = reactive([]) as any;
​
    function addImg() {
        // https://dog.ceo/api/breed/pembroke/images/random
        axios.get('https://dog.ceo/api/breed/pembroke/images/random').then(function (response) {
            picList.push(response.data.message)
        })
    }
    
    //能写钩子,计算属性
    
    //向外提供数据/方法/...
    return { picList, addImg }
​
}

useSum.ts:

import {ref} from "vue"
    
export default function(){
    const sum = ref(0)
    
    function add(){
        sum.value += 1
    }
    //能写钩子,计算属性
    
    //向外部提供东西
    return {sum,add}
​
}

使用:

<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="person">
        <h2>当前求和:{{ sum }}</h2>
        <button @click="add">点我sum+1</button>
        <hr>
        <img v-for="(img,index) in picList" :src="img" alt="" :key="index">
        <button @click="addImg">再来一张</button>
​
    </div>
</template> 
​
<script lang="ts" setup name="Person">
import useSum from '@/hooks/useSum'
import usePic from '@/hooks/usePic'
​
const {sum,add} = useSum();
const {picList,addImg} = usePic();
​
</script>
​
<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button {
    margin: 0;
}
li {
    font-size: 20px;
}
img {
    height: 100px;
}
</style>

17.路由

安装:

npm i vue-router
(1)路由器理解

看上面教程,不写了

(2)路由切换
  • src下创建router文件夹

  • router文件夹下新建index.ts

// 创建一个路由器,并暴露出去
​
// 第一步:引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'
​
// 第二步:创建路由器
const router = createRouter({
  history:createWebHistory(), //路由器的工作模式(稍后讲解)
  routes:[ //一个一个的路由规则
    {
      path:'/home',
      component:Home
    },
    {
      path:'/news',
      component:News
    },
    {
      path:'/about',
      component:About
    },
  ]
})
​
// 暴露出去router
export default router
  • 设置main.ts

import { createApp } from 'vue'
import App from './App.vue'
​
//引入路由器
import router from './router'
//创建应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂载整个应用到app容器中
app.mount('#app')
  • 最后设置展示位置即可

    • RouterView:标记路由组件展示地点

    • RouterLink to【组件】:路由跳转

      • 内置属性active-class

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
​
<script lang="ts" setup name="App">
import { RouterView, RouterLink } from 'vue-router'
​
</script>

注意:

  • 路由组件通常存放在pages 或 views文件夹中,一般组件通常存放在components文件夹。

  • 通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载

RouterLink to的两种写法

<!-- 第一种:to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
​
<!-- 第二种:to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

(3)路由器工作模式
  1. history模式

    优点:URL更加美观,不带有#,更接近传统的网站URL。

    缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误。

    const router = createRouter({
        history:createWebHistory(), //history模式
        /******/
    })
  2. hash模式

    优点:兼容性更好,因为不需要服务器端处理路径。

    缺点:URL带有#不太美观,且在SEO优化方面相对较差。

    const router = createRouter({
        history:createWebHashHistory(), //hash模式
        /******/
    })

(4)路由命名

作用:可以简化路由跳转及传参

路由规则命名:

routes:[
  {
    name:'zhuye',
    path:'/home',
    component:Home
  },
  {
    name:'xinwen',
    path:'/news',
    component:News,
  },
  {
    name:'guanyu',
    path:'/about',
    component:About
  }
]

字符串:

<!--简化前:需要写完整的路径(to的字符串写法) -->
<router-link to="/news/detail">跳转</router-link>

对象:

  • name跳转

  • path跳转

<!--简化后:直接通过名字跳转(to的对象写法配合name属性) -->
<router-link :to="{name:'guanyu'}">跳转</router-link>

(5)嵌套路由

router:

// 创建一个路由器,并暴露出去
​
// 第一步:引入createRouter
import {createRouter, createWebHistory} from 'vue-router'
// 引入可能要展示的组件
import Home from '@/views/Home.vue'
import News from '@/views/News.vue'
import About from '@/views/About.vue'
import Detail from '@/views/Detail.vue'
​
// 第二步:创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:'zhuye',
            path:'/home',
            component:Home
        },
        {
            name:'xinwen',
            path:'/news',
            component:News,
            children:[
                {
                    name:'xiang',
                    path:'detail',
                    component:Detail
                }
            ]
        },
        {
            name:'guanyu',
            path:'/about',
            component:About
        }
    ]
})
​
// 暴露出去router
export default router

New.vue跳转

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <RouterLink to="/news/detail">{{news.title}}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
​
<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink} from 'vue-router'
​
  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:'震惊,万万没想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息!好消息!',content:'快过年了'}
  ])
​
</script>

detail.vue

<template>
  <ul class="news-list">
    <li>编号:xxx</li>
    <li>标题:xxx</li>
    <li>内容:xxx</li>
  </ul>
</template>
(6)路由重定向
  1. 作用:将特定的路径,重新定向到已有路由。

  2. 具体编码:

    {
        path:'/',
        redirect:'/about'
    }

18.路由传参

(1)Query参数
  1. 传递参数

    <!-- 跳转并携带query参数(to的字符串写法) -->
    <router-link to="/news/detail?a=1&b=2&content=欢迎你">
        跳转
    </router-link>
                    
    <!-- 跳转并携带query参数(to的对象写法) -->
    <RouterLink 
      :to="{
        //name:'xiang', //用name也可以跳转
        path:'/news/detail',
        query:{
          id:news.id,
          title:news.title,
          content:news.content
        }
      }"
    >
      {{news.title}}
    </RouterLink>

  2. 接收参数:

    import {useRoute} from 'vue-router'
    const route = useRoute()
    // 打印query参数
    console.log(route.query)

detail.vue:

<template>
  <ul class="news-list">
    <li>编号:{{ route.query.id }}</li>
    <li>标题:{{ route.query.title }}</li>
    <li>内容:{{ route.query.content }}</li>
  </ul>
​
</template>
<script setup lang="ts" name="About">
import { useRoute } from 'vue-router';
let route = useRoute();
​
</script>

优化

<template>
  <ul class="news-list">
    <li>编号:{{ query.id }}</li>
    <li>标题:{{ query.title }}</li>
    <li>内容:{{ query.content }}</li>
  </ul>
</template>
​
<script setup lang="ts" name="About">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router';
let route = useRoute();
//解构优化
let { query } = toRefs(route)
​
</script>

(2)Params参数

传递参数前准备:

  • 路由器规则占位(必要)

{
    name:'xinwen',
    path:'/news',
    component:News,
    children:[
          {
              name:'xiang',
              //可选参数在参数后加上?即可
              path:'detail/:id/:title/:content?',
              component:Detail
          }
    ]
},

传递参数:

不能使用path,不能传递数组类型的参数

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <RouterLink :to="{
        name: 'xiang',
        params: {
          id: news.id,
          title: news.title,
          content: news.content,
        }
      }">
          {{ news.title }}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

接收参数:

<template>
  <ul class="news-list">
    <li>编号:{{ params.id }}</li>
    <li>标题:{{ params.title }}</li>
    <li>内容:{{ params.content }}</li>
  </ul>
</template>
​
<script setup lang="ts" name="About">
import { useRoute } from 'vue-router';
import { toRefs } from 'vue';
let route = useRoute()
let {params} = toRefs(route)
</script>

19.路由的props配置

路由规则:

{
            name:'xinwen',
            path:'/news',
            component:News,
            children:[
                {
                    name:'xiang',
                    path:'detail/:id/:title/:content',
                    component:Detail,
                    //第一种写法:将路由收到的所有params参数作为props传给路由组件
                    props:true
                }
            ]
        },
children:[
                {
                    name:'xiang',
                    path:'detail',
                    component:Detail,
                    //第二种函数写法:可以自己决定将什么作为props给路由组件
                    props(route) {
                        return route.query;
                    },
                }
            ]
children:[
                {
                    name:'xiang',
                    path:'detail',
                    component:Detail,
                    //第三种对象写法:可以自己决定将什么作为props给路由组件,不灵活,知道就好
                    props:{
                        a:1,
                        b:2
                    }
                }
            ]

传递参数:

同上,不写了

接收参数:

<template>
  <ul class="news-list">
    <li>编号:{{ id }}</li>
    <li>标题:{{ title }}</li>
    <li>内容:{{ content }}</li>
  </ul>
</template>
​
<script setup lang="ts" name="About">
defineProps(['id','title','content'])
</script>

20.路由Replace属性

(1)作用:

控制路由跳转时操作浏览器历史记录的模式。

(2)浏览器的历史记录两种写入方式:

分别为push和replace:

  • push是追加历史记录(默认值)。

  • replace是替换当前记录。

(3)开启replace模式:
<RouterLink replace .......>News</RouterLink>

21.编程式路由导航

(1)概述

脱离routerLink进行路由跳转

(2)案例
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <button @click="showNewsDetail(news)">查看新闻</button>
        <RouterLink 
          :to="{
            name:'xiang',
            query:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }"
        >
          {{news.title}}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
​
<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink,useRouter} from 'vue-router'
​
  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:'震惊,万万没想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息!好消息!',content:'快过年了'}
  ])
​
  const router = useRouter()
​
  interface NewsInter {
    id:string,
    title:string,
    content:string
  }
​
  function showNewsDetail(news:NewsInter){
    router.replace({
      name:'xiang',
      query:{
        id:news.id,
        title:news.title,
        content:news.content
      }
    })
  }
​
</script>

22.Vue3的状态管理工具-Pinia

(1)概述

看教程

官网:

Pinia | The intuitive store for Vue.js (vuejs.org)

(2)搭建pinia环境
  • 终端:安装npm i pinia

  • main.ts:引入pinia

import { createApp } from 'vue'
import App from './App.vue'
​
//引入pinia
import { createPinia } from 'pinia'
//创建Vue应用,并将app组件装在Vue应用上
const app = createApp(App)
//创建pinia,推荐在app创建完之后
const pinia = createPinia()
//使用pinia
app.use(pinia)
//将id为app的节点挂载到Vue上
app.mount('#app')

浏览器插件

edge:

  • 浏览器右上角或者设置->拓展

  • 打开 Microsoft Edge 加载项

  • 搜索vue devtools,安装即可

谷歌:同上

配置成功后

(3)使用

快速上手

  • src下创建store文件夹

  • 根据需求创建xxx.ts文件

普通数据

import { defineStore } from "pinia";
//暴露方式不固定,根据需求自定
export const useCountStore = defineStore('count',{
    //真正存储数据的地方
    state() {
        return{
            sum:6
        }
    },
});

数组类数据

// 引入defineStore用于创建store
import {defineStore} from 'pinia'
​
// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      talkList:[
        {id:'yuysada01',content:'你今天有点怪,哪里怪?怪好看的!'},
        {id:'yuysada02',content:'草莓、蓝莓、蔓越莓,你想我了没?'},
        {id:'yuysada03',content:'心里给你留了一块地,我的死心塌地'}
      ]
    }
  }
})

读数据:组件中使用state中的数据

<template>
  <h2>当前求和为:{{ sumStore.sum }}</h2>
</template>
​
<script setup lang="ts" name="Count">
  // 引入对应的useXxxxxStore 
  import {useSumStore} from '@/store/sum'
  
  // 调用useXxxxxStore得到对应的store
  const sumStore = useSumStore()
</script>
<template>
    <ul>
    <li v-for="talk in talkStore.talkList" :key="talk.id">
      {{ talk.content }}
    </li>
  </ul>
</template>
​
<script setup lang="ts" name="Count">
  import axios from 'axios'
  import {useTalkStore} from '@/store/talk'
​
  const talkStore = useTalkStore()
</script>

修改数据(三种方式)

  • 直接修改

sumStore.sum+=1
  • 批量修改

 countStore.$patch({
      a:"aaa",
      b:"bbb",
      c:"ccc"
  })
  • 使用actions修改

    • 在store/xxx.ts中配置actions

import { defineStore } from "pinia";
​
export const useCountStore = defineStore('count',{
    //actions里面放置的是一个一个的方法,用于响应组件中的“动作”
    actions:{
        increment(value:number){
            //修改数据(this是当前的store)
            this.sum += value
        }
    },
    //真正存储数据的地方
    state() {
        return{
            sum:6
        }
    },
});

修改:

let n = ref(1)
// 方法
function add() {
  countStore.increment(n.value)
}

(4)读取优化

借助storeToRefs将store中的数据转为ref对象,方便在模板中使用。

import { storeToRefs } from "pinia";
let countStore = useCountStore()
//storeToRefs只会关注sotre中数据,不会对方法进行ref包裹
let { a, b, c,.., n } =storeToRefs(countStore)

(5)数据再加工getters

当state中的数据,需要经过处理后再使用时,可以使用getters配置。

// 引入defineStore用于创建store
import {defineStore} from 'pinia'
​
// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{
    /************/
  },
  // 状态
  state(){
    return {
      sum:1,
      school:'atguigu'
    }
  },
  // 计算
  getters:{
    bigSum:(state):number => state.sum *10,
    upperSchool():string{
      return this. school.toUpperCase()
    }
  }
})

(6)监视state及其数据变化:.$subscribe

刷新不丢失:持久化功能

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
​
export const useTalkStore = defineStore('talk',{
  actions:{
    async getATalk(){
      // 发请求,下面这行的写法是:连续解构赋值+重命名
      let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
      // 把请求回来的字符串,包装成一个对象
      let obj = {id:nanoid(),title}
      // 放到数组中
      this.talkList.unshift(obj)
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
    }
  }
})

vue:

talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})

(7)store组合式写法
import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'
​
export const useTalkStore = defineStore('talk',()=>{
  // talkList就是state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )
​
  // getATalk函数相当于action
  async function getATalk(){
    // 发请求,下面这行的写法是:连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串,包装成一个对象
    let obj = {id:nanoid(),title}
    // 放到数组中
    talkList.unshift(obj)
  }
  return {talkList,getATalk}
})

23.组件通信

(1)props:父组件<=>子组件

父:

<template>
  <div class="father">
    <h3>父组件</h3>
        <h4>汽车:{{ car }}</h4>
        <h4 v-show="toy">子给的玩具:{{ toy }}</h4>
        <Child :car="car" :sendToy="getToy"/>
  </div>
</template>
​
<script setup lang="ts" name="Father">
    import Child from './Child.vue'
    import {ref} from 'vue'
    // 数据
    let car = ref('奔驰')
    let toy = ref('')
    // 方法
    function getToy(value:string){
        toy.value = value
    }
</script>

子:

<template>
  <div class="child">
    <h3>子组件</h3>
        <h4>玩具:{{ toy }}</h4>
        <h4>父给的车:{{ car }}</h4>
        <button @click="sendToy(toy)">把玩具给父亲</button>
  </div>
</template>
​
<script setup lang="ts" name="Child">
    import {ref} from 'vue'
    // 数据
    let toy = ref('奥特曼')
    // 声明接收props
    defineProps(['car','sendToy'])
</script>

(2)自定义事件:子 => 父

特殊占位符:$event 事件对象

自定义事件:@事件名=“回调函数”

父:

<template>
  <div class="father">
    <h3>父组件</h3>
        <h4 v-show="toy">子给的玩具:{{ toy }}</h4>
        <!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy"/>
  </div>
</template>
​
<script setup lang="ts" name="Father">
  import Child from './Child.vue'
    import { ref } from "vue";
    // 数据
    let toy = ref('')
    // 用于保存传递过来的玩具
    function saveToy(value:string){
        console.log('saveToy',value)
        toy.value = value
    }
</script>

子:声明自定义事件

<template>
  <div class="child">
    <h3>子组件</h3>
        <h4>玩具:{{ toy }}</h4>
        <button @click="emit('send-toy',toy)">测试</button>
  </div>
</template>
​
<script setup lang="ts" name="Child">
    import { ref } from "vue";
    // 数据
    let toy = ref('奥特曼')
    // 声明事件
    const emit =  defineEmits(['send-toy'])
</script>

(3)mitt:任意
  • 安装mitt:npm i mitt

  • 创建mitt工具文件:一般放在until文件夹下

until:emitter.ts

// 引入mitt
import mitt from 'mitt'
​
// 调用mitt得到emitter,emitter能:绑定事件、触发事件
const emitter = mitt()
​
/* // 绑定事件
emitter.on('test1',()=>{
  console.log('test1被调用了')
})
emitter.on('test2',()=>{
  console.log('test2被调用了')
})
​
// 触发事件
setInterval(() => {
  emitter.emit('test1')
  emitter.emit('test2')
}, 1000);
​
setTimeout(() => {
  // emitter.off('test1')
  // emitter.off('test2')
  emitter.all.clear()
}, 3000); */
​
​
// 暴露emitter
export default emitter

使用

import emitter from './utils/emitter'

父:

<template>
  <div class="father">
    <h3>父组件</h3>
    <Child1/>
    <Child2/>
  </div>
</template>
​
<script setup lang="ts" name="Father">
  import Child1 from './Child1.vue'
  import Child2 from './Child2.vue'
</script>

子1:

<template>
  <div class="child1">
    <h3>子组件1</h3>
        <h4>玩具:{{ toy }}</h4>
        <button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
  </div>
</template>
​
<script setup lang="ts" name="Child1">
    import {ref} from 'vue'
    import emitter from '@/utils/emitter';
​
    // 数据
    let toy = ref('奥特曼')
</script>

子2:

<template>
  <div class="child2">
    <h3>子组件2</h3>
        <h4>电脑:{{ computer }}</h4>
        <h4>哥哥给的玩具:{{ toy }}</h4>
  </div>
</template>
​
<script setup lang="ts" name="Child2">
    import {ref,onUnmounted} from 'vue'
    import emitter from '@/utils/emitter';
    // 数据
    let computer = ref('联想')
    let toy = ref('')
​
    // 给emitter绑定send-toy事件
    emitter.on('send-toy',(value:any)=>{
        toy.value = value
    })
    // 在组件卸载时解绑send-toy事件
    onUnmounted(()=>{
        emitter.off('send-toy')
    })
</script>

(4)v-model:父 <=> 子
  1. 前序知识 —— v-model的本质

    <!-- 使用v-model指令 -->
    <input type="text" v-model="userName">
    ​
    <!-- v-model的本质是下面这行代码 -->
    <input 
      type="text" 
      :value="userName" 
      @input="userName =(<HTMLInputElement>$event.target).value"
    >

  2. 组件标签上的v-model的本质::moldeValue + update:modelValue事件。

    <!-- 组件标签上使用v-model指令 -->
    <AtguiguInput v-model="userName"/>
    ​
    <!-- 组件标签上v-model的本质 -->
    <AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>

    AtguiguInput组件中:

    <template>
      <div class="box">
        <!--将接收的value值赋给input元素的value属性,目的是:为了呈现数据 -->
            <!--给input元素绑定原生input事件,触发input事件时,进而触发update:model-value事件-->
        <input 
           type="text" 
           :value="modelValue" 
           @input="emit('update:model-value',$event.target.value)"
        >
      </div>
    </template>
    ​
    <script setup lang="ts" name="AtguiguInput">
      // 接收props
      defineProps(['modelValue'])
      // 声明事件
      const emit = defineEmits(['update:model-value'])
    </script>

  3. 也可以更换value,例如改成abc

    <!-- 也可以更换value,例如改成abc-->
    <AtguiguInput v-model:abc="userName"/>
    ​
    <!-- 上面代码的本质如下 -->
    <AtguiguInput :abc="userName" @update:abc="userName = $event"/>

    AtguiguInput组件中:

    <template>
      <div class="box">
        <input 
           type="text" 
           :value="abc" 
           @input="emit('update:abc',$event.target.value)"
        >
      </div>
    </template>
    ​
    <script setup lang="ts" name="AtguiguInput">
      // 接收props
      defineProps(['abc'])
      // 声明事件
      const emit = defineEmits(['update:abc'])
    </script>

  4. 如果value可以更换,那么就可以在组件标签上多次使用v-model
<AtguiguInput v-model:abc="userName" v-model:xyz="password"/> 

父:

<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    
    <!-- 修改modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
  </div>
</template>
​
<script setup lang="ts" name="Father">
    import { ref } from "vue";
  import AtguiguInput from './AtguiguInput.vue'
  // 数据
  let username = ref('zhansgan')
  let password = ref('123456')
</script>

子:

<template>
  <input 
    type="text" 
    :value="ming"
    @input="emit('update:ming',(<HTMLInputElement>$event.target).value)"
  >
  <br>
  <input 
    type="text" 
    :value="mima"
    @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"
  >
</template>
​
<script setup lang="ts" name="AtguiguInput">
  defineProps(['ming','mima'])
  const emit = defineEmits(['update:ming','update:mima'])
</script>

(5)$attrs:祖 => 中转 => 孙
  1. 概述:$attrs用于实现当前组件的父组件,向当前组件的子组件通信(祖→孙)。

  2. 具体说明:$attrs是一个对象,包含所有父组件传入的标签属性。

    注意:$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)

父组件:

<template>
  <div class="father">
    <h3>父组件</h3>
        <Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
  </div>
</template>
​
<script setup lang="ts" name="Father">
    import Child from './Child.vue'
    import { ref } from "vue";
    let a = ref(1)
    let b = ref(2)
    let c = ref(3)
    let d = ref(4)
​
    function updateA(value){
        a.value = value
    }
</script>

子组件:

<template>
    <div class="child">
        <h3>子组件</h3>
        <GrandChild v-bind="$attrs"/>
    </div>
</template>
​
<script setup lang="ts" name="Child">
    import GrandChild from './GrandChild.vue'
</script>

孙组件:

<template>
    <div class="grand-child">
        <h3>孙组件</h3>
        <h4>a:{{ a }}</h4>
        <h4>b:{{ b }}</h4>
        <h4>c:{{ c }}</h4>
        <h4>d:{{ d }}</h4>
        <h4>x:{{ x }}</h4>
        <h4>y:{{ y }}</h4>
        <button @click="updateA(666)">点我更新A</button>
    </div>
</template>
​
<script setup lang="ts" name="GrandChild">
    defineProps(['a','b','c','d','x','y','updateA'])
</script>

(6)$refs和$parent :父 <=> 子

概述:

  • $refs用于 :父→子。

  • $parent用于:子→父。

原理如下:

属性说明
$refs值为对象,包含所有被ref属性标识的DOM元素或组件实例。
$parent值为对象,当前组件的父组件实例对象。

父:$refs

<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>房产:{{ house }}</h4>
        <button @click="changeToy">修改Child1的玩具</button>
        <button @click="changeComputer">修改Child2的电脑</button>
        <button @click="getAllChild($refs)">让所有孩子的书变多</button>
        <Child1 ref="c1"/>
        <Child2 ref="c2"/>
    </div>
</template>
​
<script setup lang="ts" name="Father">
    import Child1 from './Child1.vue'
    import Child2 from './Child2.vue'
    import { ref,reactive } from "vue";
    let c1 = ref()
    let c2 = ref()
​
    // 注意点:当访问obj.c的时候,底层会自动读取value属性,因为c是在obj这个响应式对象中的
    /* let obj = reactive({
        a:1,
        b:2,
        c:ref(3)
    })
    let x = ref(4)
​
    console.log(obj.a)
    console.log(obj.b)
    console.log(obj.c)
    console.log(x) */
    
​
    // 数据
    let house = ref(4)
    // 方法
    function changeToy(){
        c1.value.toy = '小猪佩奇'
    }
    function changeComputer(){
        c2.value.computer = '华为'
    }
    function getAllChild(refs:{[key:string]:any}){
        console.log(refs)
        for (let key in refs){
            refs[key].book += 3
        }
    }
    // 向外部提供数据
    defineExpose({house})
</script>

子1-子n:

<template>
  <div class="child1">
    <h3>子组件1</h3>
        <h4>玩具:{{ toy }}</h4>
        <h4>书籍:{{ book }} 本</h4>
        <button @click="minusHouse($parent)">干掉父亲的一套房产</button>
  </div>
</template>
​
<script setup lang="ts" name="Child1">
    import { ref } from "vue";
    // 数据
    let toy = ref('奥特曼')
    let book = ref(3)
​
    // 方法
    function minusHouse(parent:any){
        parent.house -= 1
    }
​
    // 把数据交给外部
    defineExpose({toy,book})
​
</script>

(7)provide和inject:祖 <=> 孙

祖:

<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>银子:{{ money }}万元</h4>
    <h4>车子:一辆{{car.brand}}车,价值{{car.price}}万元</h4>
    <Child/>
  </div>
</template>
​
<script setup lang="ts" name="Father">
  import Child from './Child.vue'
  import {ref,reactive,provide} from 'vue'
​
  let money = ref(100)
  let car = reactive({
    brand:'奔驰',
    price:100
  })
  function updateMoney(value:number){
    money.value -= value
  }
​
  // 向后代提供数据
  provide('moneyContext',{money,updateMoney})
  provide('car',car)
​
</script>

孙:

<template>
  <div class="grand-child">
    <h3>我是孙组件</h3>
    <h4>银子:{{ money }}</h4>
    <h4>车子:一辆{{car.brand}}车,价值{{car.price}}万元</h4>
    <button @click="updateMoney(6)">花爷爷的钱</button>
  </div>
</template>
​
<script setup lang="ts" name="GrandChild">
  import { inject } from "vue";
​
  let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
  let car = inject('car',{brand:'未知',price:0})
</script>

(8)pinia

在上方

24.插槽

(1)默认插槽

默认名为default

img

父:

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Category title="热门游戏列表">
        <ul>
          <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
      </Category>
      <Category title="今日美食城市">
        <img :src="imgUrl" alt="">
      </Category>
      <Category title="今日影视推荐">
        <video :src="videoUrl" controls></video>
      </Category>
    </div>
  </div>
</template>
​
<script setup lang="ts" name="Father">
  import Category from './Category.vue'
  import { ref,reactive } from "vue";
​
  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
​
</script>

子:

<template>
  <div class="category">
    <h2>{{title}}</h2>
    <slot>默认内容</slot>
  </div>
</template>
​
<script setup lang="ts" name="Category">
  defineProps(['title'])
</script>

(2)具名插槽

父:

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Category>
        <template v-slot:s2>
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </template>
        <template v-slot:s1>
          <h2>热门游戏列表</h2>
        </template>
      </Category>
​
      <Category>
        <template v-slot:s2>
          <img :src="imgUrl" alt="">
        </template>
        <template v-slot:s1>
          <h2>今日美食城市</h2>
        </template>
      </Category>
​
      <Category>
        <template #s2>
          <video video :src="videoUrl" controls></video>
        </template>
        <template #s1>
          <h2>今日影视推荐</h2>
        </template>
      </Category>
    </div>
  </div>
</template>
​
<script setup lang="ts" name="Father">
  import Category from './Category.vue'
  import { ref,reactive } from "vue";
​
  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
​
</script>

子:

<template>
  <div class="category">
    <slot name="s1">默认内容1</slot>
    <slot name="s2">默认内容2</slot>
  </div>
</template>
​
<script setup lang="ts" name="Category">
  
</script>

(3)作用域插槽

父:

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        <template v-slot="params">
          <ul>
            <li v-for="y in params.youxi" :key="y.id">
              {{ y.name }}
            </li>
          </ul>
        </template>
      </Game>
​
      <Game>
        <template v-slot="params">
          <ol>
            <li v-for="item in params.youxi" :key="item.id">
              {{ item.name }}
            </li>
          </ol>
        </template>
      </Game>
​
      <Game>
        <template #default="{youxi}">
          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
        </template>
      </Game>
​
    </div>
  </div>
</template>
​
<script setup lang="ts" name="Father">
  import Game from './Game.vue'
</script>

子:

<template>
  <div class="game">
    <h2>游戏列表</h2>
    <slot :youxi="games" x="哈哈" y="你好"></slot>
  </div>
</template>
​
<script setup lang="ts" name="Game">
  import {reactive} from 'vue'
  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
</script>

25.其他API

(1)shallowRef 与 shallowReactive

shallowRef:

  1. 作用:创建一个响应式数据,但只对顶层属性进行响应式处理。

  2. 用法:

    let myVar = shallowRef(initialValue);

  3. 特点:只跟踪引用值的变化,不关心值内部的属性变化。

shallowReactive:

  1. 作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属性则不会变成响应式的

  2. 用法:

    const myObj = shallowReactive({ ... });

  3. 特点:对象的顶层属性是响应式的,但嵌套对象的属性不是。

(2)readonly 与 shallowReadonly

readonly

  1. 作用:用于创建一个对象的深只读副本。

  2. 用法:

    const original = reactive({ ... });
    const readOnlyCopy = readonly(original);

  3. 特点:

    • 对象的所有嵌套属性都将变为只读。

    • 任何尝试修改这个对象的操作都会被阻止(在开发模式下,还会在控制台中发出警告)。

  4. 应用场景:

    • 创建不可变的状态快照。

    • 保护全局状态或配置不被修改。

shallowReadonly

  1. 作用:与 readonly 类似,但只作用于对象的顶层属性。

  2. 用法:

    const original = reactive({ ... });
    const shallowReadOnlyCopy = shallowReadonly(original);

  3. 特点:

    • 只将对象的顶层属性设置为只读,对象内部的嵌套属性仍然是可变的。

    • 适用于只需保护对象顶层属性的场景。

(3)更多

根据学习需要再补充

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/502403.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CTF题型 php://filter特殊编码绕过小汇总

CTF题型 php://filter特殊编码绕过小汇总 文章目录 CTF题型 php://filter特殊编码绕过小汇总特殊编码base64编码string过滤器iconv字符集 例题1.[Newstarctf 2023 week2 include]2.[Ctfshow web 117] php://filter 是一个伪协议&#xff0c;它允许你读取经过过滤器处理的数据流…

Java中的Object类解析与应用探究

作为一名对技术充满热情的学习者&#xff0c;我一直以来都深刻地体会到知识的广度和深度。在这个不断演变的数字时代&#xff0c;我远非专家&#xff0c;而是一位不断追求进步的旅行者。通过这篇博客&#xff0c;我想分享我在某个领域的学习经验&#xff0c;与大家共同探讨、共…

基于单片机自行车码表系统设计

**单片机设计介绍&#xff0c;基于单片机自行车码表系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机自行车码表系统设计主要涵盖了硬件设计、软件设计以及功能实现等多个方面。以下是对该设计概要的详细描述&#xff1a…

Sql注入靶场环境搭建

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了学习机器…

全国青少年软件编程(Python)等级考试三级考试真题2023年12月——持续更新.....

青少年软件编程&#xff08;Python&#xff09;等级考试试卷&#xff08;三级&#xff09; 分数&#xff1a;100 题数&#xff1a;38 一、单选题(共25题&#xff0c;共50分) 1.一个非零的二进制正整数&#xff0c;在其末尾添加两个“0”&#xff0c;则该新数将是原数的&#xf…

PS从入门到精通视频各类教程整理全集,包含素材、作业等(3)

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 中级教程 https://www.alipan.com/s/unii5YxtM8B 提…

【计算机考研】408复习资料汇总+分享

王道对于当作408的参考书还是不错的 所以&#xff0c;矮子里面挑高个&#xff0c;大家将就一下算了&#xff0c;很多人说天勤的讲义也可以&#xff0c;只能说你去用一下试试就知道了&#xff0c;天勤除了数据结构的代码还可以&#xff0c;其他的比不过王道的资料。所以&#x…

视频监控联网平台的评价指标体系

目录 一、视频应用系统评价指标体系的设计思路 &#xff08;一&#xff09;、明确评价目标和原则 &#xff08;二&#xff09;、确定评价指标 &#xff08;三&#xff09;、收集和处理数据 &#xff08;四&#xff09;、建立评价模型 &#xff08;五&#xff09;、进行综…

Linux---命令行参数

一、命令行参数 在介绍命令行参数前&#xff0c;我想问大家一个问题&#xff0c;在以前写C/C时&#xff0c;main 函数可不可以带参数&#xff1f; 答案是可以带的&#xff0c;int main(int argc, char* argv[]){}&#xff0c;但平时写代码时也证明了&#xff0c;main 函数的参…

Android客户端自动化UI自动化airtest从0到1搭建macos+脚本设计demo演示+全网最全最详细保姆级有步骤有图

iOS客户端自动化UI自动化airtest从0到1搭建macosdemo演示-CSDN博客 一、基础环境 1. 安装jdk 选择jdk8 如果下载高版本 可能不匹配会失败 下载.dmg文件 苹果电脑 &#xff5c; macOS &#xff5c; jdk1.8 &#xff5c; 环境变量配置_jdk1.8 mac-CSDN博客 Java Downloads …

德邦快递、物流上门取件,超过3kg,大件发德邦更优惠

“寄行李&#xff0c;出闲置物品&#xff0c;旅游寄特产”&#xff0c;发德邦&#xff1b; “家具、家电、机械设备等大件物品”&#xff0c;发德邦&#xff1b; “跨省或长距离的货物运输”&#xff0c;发德邦&#xff1b; “电商卖家&#xff0c;需要定期批量发货”,发德邦…

通过MobaXterm工具可视化服务器桌面

一、MobaXterm工具 MobaXterm是一款功能强大的远程连接工具&#xff0c;可以连接到各种类型的服务器&#xff0c;包括Linux、Windows和MacOS。支持多种协议&#xff0c;包括SSH、RDP、VNC和Telnet MobaXterm可以通过X11转发功能可视化服务器桌面。 二、MobaXterm工具可视化服务…

制作教程:如何制作一个可组合多种内容的二维码

二维码中如何放入图片和文字呢&#xff1f;现在我们经常需要通过扫码的方式&#xff0c;在手机上查看二维码中的内容&#xff0c;比如常见的类型有视频、图片、文件、文字、表单等类型。其中&#xff0c;一般在查看物品信息或者人员信息多以图文的形式来展示&#xff0c;那么图…

9.0-源码分析:Dubbo Remoting 层核心接口分析

dubbo-remoting 模块&#xff0c;该模块提供了多种客户端和服务端通信的功能。在 Dubbo 的整体架构设计图中&#xff0c;我们可以看到最底层红色框选中的部分即为 Remoting 层&#xff0c;其中包括了 Exchange、Transport和Serialize 三个子层次。这里我们要介绍的 dubbo-remot…

love 2d Lua 俄罗斯方块超详细教程

源码已经更新在CSDN的码库里&#xff1a; git clone https://gitcode.com/funsion/love2d-game.git 一直在找Lua 能快速便捷实现图形界面的软件&#xff0c;找了一堆&#xff0c;终于发现love2d是小而美的原生lua图形界面实现的方式。 并参考相关教程做了一个更详细的&#x…

javaWeb项目-学生考勤管理系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、JAVA技术 JavaSc…

百度轨迹验证码识别代码分享

百度出了如图所示的验证码&#xff0c;需要拖动滑块&#xff0c;与如图所示的曲线轨迹进行重合。经过不断研究&#xff0c;终于解决了这个问题。我把识别代码分享给大家。 下面是使用selenium进行验证的&#xff0c;这样可以看到轨迹滑动的过程&#xff0c;如果需要使用js逆向…

MySQL Server 8.3.0 重要变更解析

MySQL Server 8.3.0 Innovation 版本是 MySQL 8.x 系列最后一个创新版本&#xff0c;下个月即将迎来 MySQL 8.4.0 LTS 长期支持版本。 关于发版模型变更&#xff0c;在之前的文章 重磅&#xff01;MySQL 8.1.0 已来&#xff01; 中已有所介绍。 这里补充一点&#xff0c;对于 M…

国家发改委特许经营方案对公共数据运营的思考

数据交易所自贵州大数据交易所成立以来&#xff0c;已经有无数数据交易所像春笋一样在中华大地冒出来。随着国家数据局的成立、数据要素二十条的发布&#xff0c;各地数据交易所开启了竞赛机制&#xff0c;在数据体量、数商数量、交易规模等指标展开博弈。 公共数据运营是否会马…

Spring6-代理模式 / AOP切面编程

目录 1. 场景模拟 1.1. 声明接口 1.2. 创建实现类 1.3. 创建带日志功能的实现类 1.4. 提出问题 2. 代理模式 2.1. 概述 2.2. 静态代理 2.3. 动态代理 3. AOP切面编程 3.1. 概述 3.2. 相关术语 3.2.1. 横切关注点 3.2.2. 通知&#xff08;增强&#xff09; 3.2.3…