APP
近段時(shí)間正在用vite和vue3開發(fā)博客框架，開發(fā)中遇到了一些遺忘的知識(shí)點(diǎn)和難點(diǎn)在此記錄一下，后續(xù)對(duì)此進(jìn)行展開補(bǔ)充
- duration屬性，css3定義動(dòng)畫時(shí)長(zhǎng)（transition）
- cmd mongod啟動(dòng)mongodb
- vue雙擊事件@dblclick
- ??異步組件??
- ??路由懶加載??
- vue3圖片懶加載插件：vue3-lazy
- vue2圖片懶加載插件：vue-lazyload
// 背景模糊
// filter: blur(3px);
- vue3父子組件傳值
- 兩種定時(shí)器
- vue3動(dòng)態(tài)獲取vuex里的數(shù)據(jù)可以不用mapState，直接
user: computed(() => store.state.themeDefault.user)當(dāng)需要獲取多個(gè)數(shù)據(jù)可以用mapState
- 定義的reactive值不能來(lái)回賦值，會(huì)導(dǎo)致賦值雙方形成綁定
const state = reactive({
isShowDialog: false,
form: {
messageContent: '',
},
User: computed(() => store.state.themeDefault.userInfo)
})
比如：vuex
export default {
state: {
userInfo: {
username: '',
QqMail: '',
url: '',
Avatar: 'https://q1.qlogo.cn/g?b=qq&nk=QQ號(hào)碼&s=100',
}
},
mutations: {
getUserInfo(state, val) {
state.userInfo = val
// state.userInfo.username = val.username
// state.userInfo.QqMail = val.QqMail
// state.userInfo.url = val.url
// state.userInfo.Avatar = state.userInfo.Avatar.replace('QQ號(hào)碼', state.userInfo.QqMail.replace('@qq.com', ''))
}
}
}
vue：
const submitForm = () => {
ruleFormRef.value.validate((valid) => {
if (valid) {
// userForm.Avatar = userForm.Avatar.replace('QQ號(hào)碼', userForm.QqMail.replace('@qq.com', ''))
// state.user = userForm
console.log(userForm);
store.commit('getUserInfo', userForm)
console.log(state.User);
console.log(userForm);
state.isShowDialog = false
ElMessage({
message: '快去說(shuō)點(diǎn)什么吧！',
type: 'success',
})
} else {
return false;
}
});
}
const state = reactive({
User: computed(() => store.state.themeDefault.userInfo)
})
const userForm = reactive({
username: '',
QqMail: '',
url: '',
Avatar: 'https://q1.qlogo.cn/g?b=qq&nk=QQ號(hào)碼&s=100',
})
這里userForm 直接賦值給了vuex的userInfo，然后state里User由與vuex的userInfo綁定了，最后導(dǎo)致state.User與userForm 綁定了，兩者的值變得一樣，并且一方改變另一方也會(huì)改變，所以切記使用reactive直接賦值
- ?
?<input v-model.trim = "massage" >??去除前后空格，但是輸入的時(shí)候前后也不能輸入空格 - ?
?word-break: break-all??;：允許在單詞內(nèi)換行。 一般在textarea和 div的 雙向綁定時(shí)可以用這個(gè)屬性 - ?
?margin-left: auto;??讓左間距自適應(yīng)，實(shí)現(xiàn)div右對(duì)齊 - ?
?overflow:auto；??div內(nèi)容超出顯示滾動(dòng)條 - echarts自適應(yīng)方案
- vue自定義指令，監(jiān)控元素寬高大小
- 獲取近一周時(shí)間
- v-md-editor自定義工具欄圖標(biāo)，阿里圖標(biāo)的使用
- el-form-item自定義label
<template #label>
xxxx
</template>
- vue3 ?
?keep-alive????transition ??的使用
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<keep-alive>
<component :is="Component"/>
</keep-alive>
</transition>
</router-view>
- 路由傳參，query形式
- script和script setup一起用，script內(nèi)聲明額外的值，如name屬性
- ?
?Object.keys(state.links).length !== 0??判斷state.links這個(gè)對(duì)象是否為空 子組件最頂層用的類名如果在父組件定義了樣式，那么子組件的樣式就會(huì)被影響
??官方解釋??
- 點(diǎn)擊波紋特效
- 分頁(yè)功能
- class動(dòng)態(tài)綁定
- exact-active-class和 active-class
- 父組件網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)后向子組件傳數(shù)據(jù)
<a-component :opt="opt" v-if="opt"></a-component>
- 進(jìn)入頁(yè)面自動(dòng)播放音樂問題
- vue跳轉(zhuǎn)到頁(yè)面指定位置
- 自定義鼠標(biāo)樣式，并設(shè)置鼠標(biāo)樣式圖片對(duì)齊點(diǎn)
- vue中頁(yè)面跳轉(zhuǎn)滾動(dòng)條置頂（總結(jié)）
- 字符串?dāng)?shù)組相互轉(zhuǎn)換
- js數(shù)組遍歷和篩選
- css三角形
- 父組件調(diào)用子組件方法
- vue路由傳對(duì)象
- ??watch監(jiān)聽??
- 根據(jù)變量動(dòng)態(tài)取對(duì)象的key
var data = {
"green40": {
a: 1
},
"green40.5": {
a: 2
}
}
var getkey = 'green40';
// data[getkey]
console.log(data[getkey].a)
- el-tooltip錯(cuò)位問題：加上?
?:teleported="false"?? - vue3對(duì)404配置進(jìn)行了修改,必須要使用正則匹配?
? path: '/:pathMatch(.*)*'?? - ?
?text-shadow?? - vite動(dòng)態(tài)路由
- ?
?"../views/**/**.vue"??；兩個(gè)**引入所有文件 - 導(dǎo)航首位，博客主題切換
element-ui, upload組件
auto-upload設(shè)置為false的時(shí)候，before-upload事件是不起作用的；
解決辦法：
使用on-change事件來(lái)代替before-upload
- 數(shù)組倒敘：?
?數(shù)組.reverse()??
獲取對(duì)象長(zhǎng)度：
對(duì)象的長(zhǎng)度不能用.length獲取，可以用Object.keys獲取
var obj = {'id':1,'name':'葉落森','sex':'女'};
var arr = Object.keys(obj);
console.log(arr); // ['id','name','sex']
console.log(arr.length); //3Object.keys可以獲取key值
Object.keys(obj)
Object.values可以獲取value值
Object.values(obj)
- 對(duì)象轉(zhuǎn)數(shù)組
let arr = []
let obj = {
dr: "dr001",
ljy: "ljy002"
}
for(let prop in obj) {
arr.push({
name: prop,
ct: obj[prop]
})
}
console.log('arr', JSON.stringify(arr, null, 2));
- 與后端交互獲取博客文章展示到頁(yè)面后，無(wú)法獲取錨點(diǎn)，原因主要在于生命周期，需要把獲取錨點(diǎn)的操作放到dom更新之后，所以使用nextTick鉤子函數(shù)
import { nextTick } from 'vue'配合異步：
async function getBlog() {
//發(fā)送請(qǐng)求
const res = await request.getBlogById(route.params.id)
state.blog = res.Msg
await nextTick()
//執(zhí)行生成錨點(diǎn)的函數(shù)
GenerateAnchor()
}
// 生成錨點(diǎn)
const GenerateAnchor = () => {...}
普通使用：
nextTick(()=>{
....
})
父子組件通信時(shí)，子組件不能實(shí)時(shí)展示父組件傳來(lái)的數(shù)據(jù)解決辦法：
子組件用v-if來(lái)判斷是否展示子組件，在父組件向子組件傳遞新的值之前先利用v-if將子組件隱藏，向子組件傳過新值之后再重新顯示子組件
<Category-every :category="category" v-if="flag"></Category-every>
const select=(category)=> {
flag.value = false;
category.value = category
//鉤子函數(shù)
nextTick(() => {
flag.value = true;
});
}如果是向子組件傳遞了新值后調(diào)用子組件的方法時(shí)發(fā)現(xiàn)該方法使用的值還是舊值，此時(shí)可以在向子組件傳遞新值后在鉤子函數(shù)里調(diào)用子組件方法
<PaginationVue
:data="pagingSearchState.data"
></PaginationVue>
const oneClick = () => {
//傳新值
pagingSearchState.data = state.LeaveWord
nextTick(() => {
//子組件方法
searchClick()
})
}- ?
?background-attachment: fixed;??背景圖片固定 - 父子組件雙向綁定數(shù)據(jù)
本文摘自 ：https://blog.51cto.com/u
