vue3学习笔记

根组件的createApp创建组件App

vue的三大模块

template页面dom

script数据传输

style样式结构

template数据循环

1、 v-for实现数据循环

<li v-for="item in game" :key="item"></li>
<script lang='ts'>
let games={
{1},{2},{3}
}
</script>

2、样式直接通过class引用

3、方法通过@方法调用

4、 :js的语法表达式

options Api选项 script结构介绍：

name: 存放组件名字

data：存放初始化数据

methods：存放函数方法

vue2与vue3的优缺点

1、optionAPI选项方法弊端结构复杂新增方法需要再name data methods所有方法中添加处理比较麻烦

2、Composition 组合式开发模式建议开发

3、vue3可以读取vue2的内容，vue2不能读取vue3

vue3写法

1、所有方法写在setup(){}

2、 setup数据不为响应式数据，也可以是一个返回函数

3、 setup里面不能使用this

4、 setup语法糖

<script lang="ts" setup><scipt>

5、类名修改通过vue-setup-extend插件实现类名修改

<script lang="ts" setup name='className'><scipt>

vue3响应式框架

1、通过vue引入ref修改基础类型、对象类型，哪里需要哪里通过ref包裹

let name = ref('luckyjian')
name.value='jian'

2、通过vue引入reactive修改对象操作，哪里需要哪里通过reactive

let car=reactive({brand:'奔驰'，price：100})

3、响应式数据直接结构会变成不响应式数据可以通过toRefs包裹恢复响应式

import {toRefs} from 'vue'
const { data } = toRefs(query);

vue3数据监听

1、通过watch监听ref数据修改，开启深度见识通过添加immediate为true

// 监听ref定义的对象值
watch(()=>prson,(newVale,oldVale)=>{
ocnsole.log('监听prosn',newVale,oldVale)
}, immediate:true)

2、通过watch监听reactive数据修改输入深度监听，无法关闭

Vue的生命周期

1、vue2创建===》挂载====》更新=====》销毁

// 创建前
beforCreate(){}
// 创建完毕
Create(){}
// 挂载前
beforeMount(){}
// 挂载完毕
mounted(){}
// 更新前
beforeUpdate(){}
// 更新完毕
update(){}
// 销毁前
beforeDestory(){}
//销毁
destroyed(){}

2、 vue3创建===》挂载====》更新=====》销毁

// 挂载前
onBeforeMount(()=>{})
//挂载完毕
onMounted(()=>{})
//更新前
onBeforeUpdate(()=>{})
// 更新完毕
onUpdated(()=>{})
// 卸载
onbeforeUnmount(()=>{})
// 卸载完毕
onUnmounted(()=>{})

Vue-router

1、 vue-router用于创建一个路由实现网页通讯，挂载在app上

app.use(Router)

2、 router更新需要通过RouterView进行展示

<div>挂载
<RouterView></RouterView>
</div>

3、通过routerLink进行路由跳转，通过active-class来激活点击后效果

<RouterLinke :to="{path:'/目标'}" active-class="选中颜色"></RouterLinke>

组件定义：一般组件放在components中，router组件放在page中

点击导航视觉上消失的路由组件，默认是被卸载的，需要的时候再去进行挂载

路由工作模式

history：1、 vue2: mode:'history'；2、vue3: history: createWebhistory()；3、react： BrowserRouter；有点：域名访问地址更加美观，更接近与传统网站；缺点：后期项目上线需要服务器配合处理路径问题，否则容易出现404错误

hash模式：优点：兼容性好，不需要服务器配合处理路径；缺点：需要URL带上#号，且SEO优化相当差

路由嵌套传参

1、通过children实现路由嵌套

{
name:'',
path:''，
compoent:'',
children:[
{
pahth:'',
compoent:'',
}
],
}

1、通过路由query进行传参

<RouterLinke :to="{path:'/目标',
query:{
参数
}
}" active-class="选中颜色"></RouterLinke>

2、 params进行传参需要再先在路由占位，且地址只能用name链接路由地址

{
name:'',
path:''，
compoent:'',
children:[
{
pahth:'/路由地址/:占位',
compoent:'',
}
],
}

<RouterLinke :to="{name:'/目标',
params:{
参数
}
}" active-class="选中颜色"></RouterLinke>

3、 props传递参数

{
name:'',
path:''，
compoent:'',
children:[
{
pahth:'/路由地址/:占位',
compoent:'',
// 第一种写法只能和params配合
// props： true，
// 第二种写法query
props(rotue){
return requry.route
}
],
}

<RouterLinke :to="{name:'/目标',
params:{
参数
}
}" active-class="选中颜色"></RouterLinke>

路由操作历史记录

1、 push模式，指针模式

2、 replace模式，直接替换

编程式导航

1、通过useRouter实现编程导航

import { useRouter } from 'vue';
const ruter = userRouter();
router.push({
name:'',
query:{}
})