目录
回顾
1. props
不需要在data中定义了，他就在当前组件对象身上了 this
props:[]
props:{name:String}
props:{
name:{require:xxx,default:xxx}
}
2.组件间通信
1.父子：父传子，自定义属性
2.子传父，定义事件
3.ref属性
4.localStorage,sessionStorage,cookieStorage
5.vuex
3.mixin 混入
抽取代码
4.插件 --->>> 使用第三方插件(vue-router,vuex,elementui)
导入：
Vue.use(elementui) --->>> install(){}
自定义插件：
xx.js中 export default{
install(vue){
1.自定义指令
2.往vue中放全局
Vue.prototype.$axios=axios
3.执行mixin
4.全局组件
}
}
5.vuex：状态管理器，集中式状态管理，存放变量
三个状态
state:真正存数据的
mutations:修改state的地址，state.变量，修改即可
actions:判断跟后端交互，调用mutations的地方 context.commit
在组件中使用
模板中：{{$store.state.变量名}}
js中：
直接用：this.$store.state.变量名
调用mutations:this.$store.dispatch()
6.vueRouter:完成单页面应用路由跳转的效果
1 基本使用，router/index.js---->router加对象 {}，加入路径后，访问这个路径就显示指定的组件
2 跳转到不同的页面
js控制：this.$router.push('路径') ，可以写个对象
标签控制：router-link :to属性=路径，也可以写个对象
3 跳转到别的页面传参数
?name=lqz&age=19 取：this.$route.query.name
/books/1/ index.js 中配置路由 取：this.$route.params.id
4 路由守卫
-全局路由守卫
-前置守卫：
-后置守卫
-前置守卫
router.beforeEach((to, from, next) => {
// 1 取出cookie中token
//2 判断如果不是login页面，from对象，就是路由对象，判断一下，如果是，next()
// 3 如果不是，判断token的值是否为空，如果为空，弹窗，跳转到login
// router.push({name: 'login', params: {id: 99}})
// router.push('/login/88')
next({name:'login',params:{id:33}})
})
- localStorage，sessionStorage，cookie
-cookie：借助于第三方 vue-cookies
vue3介绍
背景：vue项目的版本，新项目使用vue3,有部分老项目使用vue2
变化：更快，变成了组合式API。没配置项了，可以定义变量直接用。
vue的变化
1.性能的提升
-打包大小减少41%
-初次渲染快55%, 更新渲染快133%
-内存减少54%
2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking
3.拥抱TypeScript
Vue3可以更好的支持TypeScript
4.新的特性
Composition API（组合API）
setup配置
ref与reactive
watch与watchEffect
provide与inject
新的内置组件
Fragment
Teleport
Suspense
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
组合式API与配置项API
vue2:配置项API
new Vue({
el:'#app',
data:{}
})
vue3:组合式API
let name='lpz'
let add=()=>{
}
vue3创建项目
创建跟之前vue一样，只是选择vue版本的时候选择vue3，其他没有变
扩展之vite
热重载：编译快，就好比我们在pychram中看到的运行要编译
传统与新一代
新建的前端构建工具，最大的优势就是速度快
网址：https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
使用步骤
安装：npm init vue@latest
按需选择，vueReter
cd到项目中执行cnpm install 把依赖安装好
运行：npm run dev
vueReter:跟之前一样
pinia:用来替换Vuex的，新一代的状态管理器
链式调用
# 为什么这么快？
创建项目快 --->>> 不安装第三方依赖
执行项目，热更新 --->>> 按需编译
vite只能创建vue3项目
创建项目：
pinia:新一代的状态管理器
要不要代码格式化 NO
链式调用
运行得下载第三方依赖
npm install
npm run dev(可以添加serve这样就可以点击运行)
对比：
是serve
vite
是dev
直接写，不用写return返回了
直接用：
导入导出也不用写了，ts完全兼容js
setup函数
vue3，创建洁净环境看起来没那么乱
vue2的创建vue实例和vue3创建vue实例的区别
vue2中 Vue的实例。-new Vew()---->是Vue的实例，里面有$store,$refs...
vue3中 是个对象。没有this了,以后要用都还是导入用
createApp(App)--->是个对象，对象里有东西，没有$store,$refs...，以后有用，都是导入使用
以后Vue3的
以后配置项api不建议使用了,使用组合式API
以后都在setup函数里面写组合式API
用let，定义局部变量。定义常量const。不要用var。如图：
必须return出去
添加事件，点击加年龄。
然而页面却没变，数据变了。这叫响应式，失去了响应式
ref和reactive
# 有响应式
以后定义变量，如果想要响应式就用 ref包裹起来，再修改变量，需要用 变量名.value 修改
# 配置项api和组合式api可以混写，不建议
在前在data中定义的变量
在setup中定义的变量
解决失去响应式
ref
被ref包裹了,就是该ref的RefImpl对象，如图，去打印age
结果：如图可以看出值在value中
所以得点value，但是不能用age.value++
age.value+1才对
在setup中定义的变量和函数，在之前配置项api中可以直接用this.变量，函数调用即可。但是在原来配置项中定义的变量，函数，在setup中无法使用
配置项式API中methods
reative
userInfo:
打印:
结果：
就得点点了，点value再点gender
导reactive
用reactive包裹
打印：
结果：
直接用
不需要点value去改了
总结：
# 不同类型做响应式：
ref通常用来包裹，数字，字符串类型 以后使用 xx.value
reactive用来包裹数组和对象类型 以后使用 直接用即可
ref定义的数据：操作数据需要.value，读取数据是模板中直接读取不需要.value
reacrtive定义的数据：操作数据与读取数据，均不需要点value
计算属性和监听属性
计算属性
# computed 的配置项中的写法，不建议用了
computed:{
fullName(){
return this.firstName+this.lastName
}
},
# vue3 新写法
let person = reactive({
firstName: '',
lastName: '',
})
let fullName = computed(() => {
return person.firstName + person.lastName
})
# 计算属性取值和修改值
let fullName = computed({
get() {
return person.firstName + person.lastName
},
set(value) {
person.firstName = value.slice(0, 1)
person.lastName = value.slice(1)
},
})
姓：、名：
之前的是写在配置项中，不建议用。
姓+名：
全在setup里面写，首先导computed
上面用ref写麻烦
改成reactive，再导入computed，里面写个匿名函数再return返回
改成：
结果：
补充：计算属性改值：
获取get 修改set
结果：全名里输 会拆分姓和名
监听属性
# 组合式api写法，只要name发生变化，就会触发匿名函数执行
let name = ref('lqz')
watch(name, (newName, oldName) => {
console.log('name变了')
console.log('老的', oldName)
console.log('新的', newName)
})
# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
watchEffect(() => {
console.log(age.value)
})
之前放在watch里。导watch，watch要监听哪个
只要name发生变化 触发匿名函数执行
事件：
点击名字加问号
结果：
watchEffect
不需要传监听谁
只要用了某个它
就都会执行，一变化就执行
生命周期
# vue3的变化，不推荐了
-vue2 和 vue3比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
# 不推荐用这种写法了，配置项写法，统统写在setup中
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
# 以前写在created中的代码，现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
setup是相当于之前的beforCreate
显示：
以上不推荐了
一刷新：
由八个变七个，都写在setup里。原来写在created中的代码写在setup中即可
直接定变量赋值发请求
toRefs
# 以后setup的返回值可以直接使用
setup() {
let data = reactive({
name: 'lqz',
age: 19,
gender: '男'
})
return {...toRefs(data)}
}
# 以后在模板中直接用 {{name}}
导toRefs：
解构赋值：
相当于是打散了
script setup的作用和lang=ts
<script setup>
import {ref} from 'vue'
let name = ref('lqz')
let handleClick = () => {
alert('美女')
}
</script>
# 以后 这个script中的代码直接放到 setup函数中，不用return了
#lang=ts
里面代码使用ts写，而ts完全兼容js，继续写js代码没问题
vue后台管理模板
# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
# django-vue-admin 前端---》D2Admin
# 若依：vue前端 用来 vue-element-admin
# elamin前端 drf 写了基于rbac权限管理的框架
# https://gitee.com/liuqingzheng/vue_admin