Vue3项目开发

搭建项目

npm init vite-app 项目名称
npm run dev //运行项目命令

声明式渲染和命令式渲染

//声明式
<template>
  <h1>{{msg}}}</h1>
</template>

<script>


export default {
  name: 'App',
  data(){
    return {
      msg:'hello'
    }
  }
}

//命令式
document.querySelector("h1").innerHTML='xie'

• v-once：内容只渲染一次
• v-html：使得内容可以插入html的代码
• v-bind：绑定属性的值，语法糖为：
• v-on：监听事件，语法糖为@

动态参数

:[attributeName]="d"	//attribute和d都是变量，需要在data中赋值

监听数据变化

//包含了两个参数新值和旧值
watch:function(newVal,oldVal){

}

动态类名

<h1 :class="{active:isActive}"/>
<button @click='toggleActive'/>

export default{
	name:'app',
	data(){
		return {
			isActive:true	
		}
	},
	methods:{
		toggleActive(){
			this.isActive=!this.isActive
		}
	}
}

<style scoped>
	.active{
		color:red;	
	}
</style>

监听事件传参

//$event 为调用事件的对象
<button @click="btnClick($event,10)" />

export default{
	data(){
		return {
			number:0	
		}
	},
	methods:{
		btnClick(event,num){
			this.number+=num
			console.log(event)	
		}
	}
}

• v-model.lazy：当输入失去焦点才会改变，相当于把input事件变为change事件
• v-model.lazy.number：将输入转化为数字
• v-model.trim：将输入中的空格自动去除

watchEffect：立即执行里面的函数，并追踪其响应式依赖，如果依赖发生改变，则再次调用该函数

watch：监听特定的对象，回调函数参数为监听对象的新值和旧值

//监听多个源
watch([num,age],([newNum,Newage],[preNum,preAge])=>{})

provide+inject组件通信

//需要传值的组件  provide(传过去的变量名,提供的变量)
provide('student',student)

//接收值的组件 inject(传过来的变量名)
const student=inject('student')

匹配404页面

const route=[{
	path:'/:path(.*)',
	component:()=>import()
}]

路由正则

//匹配id必须为数字
const route=[{
	path:'/article/:id(/\\d+)'
}]

//匹配多个参数
const route=[{
	path:'/article/:id+'
}]
//返回params.id为一个数组

//*有没有参数都可以
const route=[{
	path:'/article/:id*'
}]

//?有或没有都可以，匹配0次或1次
const route=[{
	path:'/article/:id？'
}]

js实现路由跳转

this.$router.push({path:'/about'})

//携带参数跳转
this.$router.push({name:'news',params:{id:798}})

//替换页面
this.$router.replace()

//前进和后退
this.$router.go()

vue3设置状态管理

//vue3的状态管理通过reactive+provide+inject实现
const store={
	state:reactive({
	message:'1'	
	}),
	setMessage(val){
		this.state.message='2'	
	}
}
//在全局中provide(store)
//在需要使用公共状态的地方inject['']

fetch异步获取资源

fetch(api).then(res=>res.json()).then(result=>{
	console.log(result)
})

vue3中使用axios进行前后端请求

axios.get(api).then(res=>{console.log(res)})

vite配置跨域请求

在vite.config.js中配置

module.exports={
	proxy:{
		'/api':{
			target:'https://lol.qq.com/',   //使用/api代理域名
			changeOrigin:true， //允许跨域
			rewrite:path=>path.replace('/^\/api/','')
		}
	}
}

//当axios发送请求碰到/api时，它会将其进行拼接：https://lol.qq.com//api/tft/js/component/global-component.js?v=20220624，
//而通过设置重写将/api变为空字符串：https://lol.qq.com/tft/js/component/global-component.js?v=20220624

使用mock模拟数据

import Mock from 'mockjs'

Mock.setup({
	timeout:'200-600'
})

Mock.mock(
	'/api'，
	'get',
	()=>{
		return {
			//要返回的数据	
		}	
	}
)

//mock正则匹配网址
Mock.mock(
	/\/api.*/，	//即匹配/api，/api/随便
	'get',
	()=>{
		return {
			//要返回的数据	
		}	
	}
)

vuex状态管理的使用

• state：存放数据
• getters：相当于computed
• mutations：修改状态的方法 ，调用mutations中的方法使用this.$store.commit()
• actions：存放异步方法,调用actions中的方法使用this.$store.dispatch()

映射状态数据和方法

import {mapActions,mapGetters,mapMutations,mapState} from 'vuex'

computed:{
	...mapState(['count'])
}