搭建項(xiàng)目

npm init vite-app 項(xiàng)目名稱 npm run dev //運(yùn)行項(xiàng)目命令

聲明式渲染和命令式渲染

//聲明式 <template><h1>{{msg}}}</h1> </template><script>export default {name: 'App',data(){return {msg:'hello'}} }//命令式 document.querySelector("h1").innerHTML='xie'

• v-once：內(nèi)容只渲染一次
• v-html：使得內(nèi)容可以插入html的代碼
• v-bind：綁定屬性的值，語(yǔ)法糖為：
• v-on：監(jiān)聽(tīng)事件，語(yǔ)法糖為@

動(dòng)態(tài)參數(shù)

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

監(jiān)聽(tīng)數(shù)據(jù)變化

//包含了兩個(gè)參數(shù)新值和舊值 watch:function(newVal,oldVal){}

動(dòng)態(tài)類名

<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>

監(jiān)聽(tīng)事件傳參

//$event 為調(diào)用事件的對(duì)象 <button @click="btnClick($event,10)" />export default{data(){return {number:0 }},methods:{btnClick(event,num){this.number+=numconsole.log(event) }} }

• v-model.lazy：當(dāng)輸入失去焦點(diǎn)才會(huì)改變，相當(dāng)于把input事件變?yōu)閏hange事件
• v-model.lazy.number：將輸入轉(zhuǎn)化為數(shù)字
• v-model.trim：將輸入中的空格自動(dòng)去除

watchEffect：立即執(zhí)行里面的函數(shù)，并追蹤其響應(yīng)式依賴，如果依賴發(fā)生改變，則再次調(diào)用該函數(shù)

watch：監(jiān)聽(tīng)特定的對(duì)象，回調(diào)函數(shù)參數(shù)為監(jiān)聽(tīng)對(duì)象的新值和舊值

//監(jiān)聽(tīng)多個(gè)源 watch([num,age],([newNum,Newage],[preNum,preAge])=>{})

provide+inject組件通信

//需要傳值的組件 provide(傳過(guò)去的變量名,提供的變量) provide('student',student)//接收值的組件 inject(傳過(guò)來(lái)的變量名) const student=inject('student')

匹配404頁(yè)面

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

路由正則

//匹配id必須為數(shù)字 const route=[{path:'/article/:id(/\\d+)' }]//匹配多個(gè)參數(shù) const route=[{path:'/article/:id+' }] //返回params.id為一個(gè)數(shù)組//*有沒(méi)有參數(shù)都可以 const route=[{path:'/article/:id*' }]//?有或沒(méi)有都可以，匹配0次或1次 const route=[{path:'/article/:id？' }]

js實(shí)現(xiàn)路由跳轉(zhuǎn)

this.$router.push({path:'/about'})//攜帶參數(shù)跳轉(zhuǎn) this.$router.push({name:'news',params:{id:798}})//替換頁(yè)面 this.$router.replace()//前進(jìn)和后退 this.$router.go()

vue3設(shè)置狀態(tài)管理

//vue3的狀態(tài)管理通過(guò)reactive+provide+inject實(shí)現(xiàn) const store={state:reactive({message:'1' }),setMessage(val){this.state.message='2' } } //在全局中provide(store) //在需要使用公共狀態(tài)的地方inject['']

fetch異步獲取資源

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

vue3中使用axios進(jìn)行前后端請(qǐng)求

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

vite配置跨域請(qǐng)求

在vite.config.js中配置

module.exports={proxy:{'/api':{target:'https://lol.qq.com/', //使用/api代理域名changeOrigin:true， //允許跨域rewrite:path=>path.replace('/^\/api/','')}} }//當(dāng)axios發(fā)送請(qǐng)求碰到/api時(shí)，它會(huì)將其進(jìn)行拼接：https://lol.qq.com//api/tft/js/component/global-component.js?v=20220624， //而通過(guò)設(shè)置重寫將/api變?yōu)榭兆址?#xff1a;https://lol.qq.com/tft/js/component/global-component.js?v=20220624

使用mock模擬數(shù)據(jù)

import Mock from 'mockjs'Mock.setup({timeout:'200-600' })Mock.mock('/api'，'get',()=>{return {//要返回的數(shù)據(jù) } } )//mock正則匹配網(wǎng)址 Mock.mock(/\/api.*/， //即匹配/api，/api/隨便'get',()=>{return {//要返回的數(shù)據(jù) } } )

vuex狀態(tài)管理的使用

• state：存放數(shù)據(jù)
• getters：相當(dāng)于computed
• mutations：修改狀態(tài)的方法 ，調(diào)用mutations中的方法使用this.$store.commit()
• actions：存放異步方法,調(diào)用actions中的方法使用this.$store.dispatch()

映射狀態(tài)數(shù)據(jù)和方法

import {mapActions,mapGetters,mapMutations,mapState} from 'vuex'computed:{...mapState(['count']) }

總結(jié)

以上是生活随笔為你收集整理的Vue3项目开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。