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