目录
回顾
vue-router
-
vue-router:3版本对应vue2,4版本对应vue3
-
单页面应用：index.html，以后都是页面组件间的切换，借助于vue-router
-
使用步骤
-
在任意组件中
this.$router:路由对象，控制路由的跳转，push，go，back… this.$route:当前路径，当前路径对象，query，params -
只需要在router/index.js的routes配置路由对象即可，浏览器地址栏中输入路径就显示某个页面
-
-
路由嵌套：routes内部对象中写：children--->/good/list
-
路由跳转
- html跳转：router-link to属性 可以直接写字符串路径，数据绑定对象{}
- js跳转：this..$router.push('goods')
-
跳转携带数据
- get地址中参数：this.$route.query.参数名
- 路由中分割出来的参数：this.$route.param.【router/index.js的routes使用：绑定的】
路由守卫
-
进入该路径前进行一些逻辑判断，允许或不允许
-
权限的控制
-
router.beforeEach()
-
router.afterEach()
-
vue3
一、介绍
-
性能的提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54% -
源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking -
拥抱TypeScript
Vue3可以更好的支持TypeScript -
新的特性
-
Composition API（组合API）
setup配置
ref与reactive
watch与watchEffect
provide与inject -
新的内置组件
Fragment
Teleport
Suspense -
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
-
-
组合式API和配置项API
-
使用组合式API
-
配置项API
-{
name:'xx',
data:function(){},
methods:{}
}
-
二、创建vue3项目的两种方式
-
vue-cil:创建vue2和vue3
- 跟之前一样
-
vite:创建vue3,创建最新
- npm init vue@latest
- Pinai可以了解一下
-
vite创建另一种方式：创建vue3.0.4版本
npm init vite-app <project_name> ## 进入工程目录 cd <project_name> ## 安装依赖 npm install ## 运行 npm run dev # 以后页面中的this，已经不是vue2中的vc对象，是一个代理对象
三、setup函数
-
vue3 新增的setup配置项函数的特点
- 可以定义变量
- 可以定义函数
- 必须 return{ 变量和函数 }，在模板中才可以使用
-
此时的变量age值不能够和渲染的一样增减，因为没有响应式
-
<template> <h2>{{ name }}</h2> <h3>{{ age }}</h3> <hr> <button @click="handleClick">点击，age+1</button> <br> </template> <script> export default { name: 'APP', setup() { // setup中没有this了 // 所有的变量，要用定义函数编写，都写在setup中 // 定义变量 let age = 20 let name = 'zhang' // 定义函数 function handleClick() { console.log('要开始加了') age = age + 1 console.log('当前的age：', age) } // 函数必须要有返回值 return { age, name, handleClick } } } </script>
四、ref 和 reactive
-
导入使用：
import {ref,reactive} from 'vue' -
基本数据类型：数字、字符串、布尔
-
响应式：用
ref包裹，在模板中使用，js中通过对象.value取值 -
对象、数组引用使用：
reactive -
ref
可以包裹对象类型，但是用的时候必须对象.value` -
用reactive包裹对象，直接就是Proxy对象
-
<template> <h2>{{ name }}</h2> <h3>{{ age }}</h3> <hr> <button @click="handleClick">点击，age+1</button> <br> </template> <script> import {ref, reactive} from "vue"; export default { name: 'APP', setup() { let age = ref(20) // age已经不是数字了，而是refImpl对象 let name = ref('zhang') let person = reactive({name:'zhan',age:100}) // 定义函数 function handleClick() { console.log(age) age.value += 1 console.log(name) name.value = 'gill' console.log(person) } // 函数必须要有返回值 return { age, name, handleClick } } } </script> <style> </style>
-
五、计算和监听属性
-
计算属性
<template> <h2><input type="text" v-model="person.firstname">--->{{ person.firstname }}</h2> <h2><input type="text" v-model="person.lastname">--->{{ person.lastname }}</h2> <h2><input type="text" v-model="person.fullName">--->{{ person.fullName }}</h2> <br> </template> <script> import {ref, reactive} from "vue"; import {computed, watch, watchEffect} from "vue"; export default { name: 'APP', // computed: { // fullName:function (){} // }, setup() { //// 计算属性案例一： // let firstname = ref('zhang') // let lastname = ref('bin') // let fullName = computed(() => { // return firstname.value + lastname.value // }) // return { // firstname, lastname, fullName // } //// 计算属性案例二：定义一个对象 let person = reactive({ firstname: 'zhang', lastname: 'bin' }) // let fullName = computed(() => { // return person.firstname+person.firstname // }) //// 计算属性案例三：把computed作为对象person的属性 person.fullName = computed({ get() { return person.firstname + '-' + person.lastname }, set(value) { console.log(value) const nameArr = value.split('-') person.firstname = nameArr[0] person.lastname = nameArr[1] } }) return { person, // fullName } } } </script> -
监听属性
<template> <h2><input type="text" v-model="name">--->{{ name }}</h2> <br> </template> <script> import {ref, reactive} from "vue"; import {computed, watch, watchEffect} from "vue"; export default { name: 'APP', setup() { let name = ref('zhang') // 只要name变了就会执行函数 watch(name, (newone, old) => { console.log('name变了') console.log(old) console.log(newone) }) // vue3里的watchEffect 只要函数中的变量发生变化就会触发 watchEffect(() => { let a = name.value + '!' console.log('watchEffect触发') }) return { name, } } } </script> <style> </style>
六、生命周期
1.vue3中可以继续使用vue2.x中的生命周期钩子，但有两个被更名
- beforeDestory改名为：beforeUnmount
- destroyed改名为：unmounted
2.Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
七、hooks
-
本质:
是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂 -
hook/usePoint.js
import {onMounted, onUnmounted, reactive} from "vue"; export default function () { let p = reactive({ x: 0, y: 0 }) function getPoint(event) { console.log(event) p.x = event.pageX p.y = event.pageY } // 声明周期钩子的onMounted，当页面挂载就会执行 onMounted(() => { // 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数 window.addEventListener('click', getPoint) }) // 组件被销毁时，把功能去掉 onUnmounted(() => { window.removeEventListener('click', getPoint) }) return p } -
在组件中引入使用
<template> <h2>x坐标是：{{ p.x }},y坐标是:{{ p.y }}</h2> </template> <script> import {reactive, onMounted, onUnmounted} from 'vue' import usePoint from '../hook/uesPoint.js' export default { name: "Point", setup() { let p = usePoint() return {p} } }
八、toRefs
-
setup函数，return{...toRefs(data)}可以解压赋值
export default { name: 'App', setup() { let data = reactive({ name: 'lqz', age: 19, isShow: true }) function handleShow() { console.log('ssdaf') data.isShow = !data.isShow data.age++ } return { ...toRefs(data), handleShow // data } } }
九、后台管理模板
# vue-admin-template-master
-跑起来
-package.json 第7行加入
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
# java版的若依，带权限控制的后台管理模块
# python ：django-vue-admin
# python flask-vue-admin
# go:gin-vue-admin