當(dāng)前位置：首頁 > IT技術(shù) > 其他 > 正文

博客項(xiàng)目知識點(diǎn)
2022-05-11 10:54:32



近段時間正在用vite和vue3開發(fā)博客框架，開發(fā)中遇到了一些遺忘的知識點(diǎn)和難點(diǎn)在此記錄一下，后續(xù)對此進(jìn)行展開補(bǔ)充


  1. duration屬性，css3定義動畫時長（transition）
  2. cmd mongod啟動mongodb
  3. vue雙擊事件@dblclick
  4. ??異步組件??
  5. ??路由懶加載??
  6. vue3圖片懶加載插件：vue3-lazy
  7. vue2圖片懶加載插件：vue-lazyload
// 背景模糊
     // filter: blur(3px);
  1. vue3父子組件傳值
  2. 兩種定時器
  3. vue3動態(tài)獲取vuex里的數(shù)據(jù)可以不用mapState，直接
user: computed(() => store.state.themeDefault.user)

當(dāng)需要獲取多個數(shù)據(jù)可以用mapState

  1. 定義的reactive值不能來回賦值，會導(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號碼&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: '快去說點(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號碼&s=100',
})

這里userForm 直接賦值給了vuex的userInfo，然后state里User由與vuex的userInfo綁定了，最后導(dǎo)致state.User與userForm 綁定了，兩者的值變得一樣，并且一方改變另一方也會改變，所以切記使用reactive直接賦值

  1. ??<input v-model.trim = "massage" >??去除前后空格，但是輸入的時候前后也不能輸入空格
  2. ??word-break: break-all??;：允許在單詞內(nèi)換行。 一般在textarea和 div的 雙向綁定時可以用這個屬性
  3. ??margin-left: auto;??讓左間距自適應(yīng)，實(shí)現(xiàn)div右對齊
  4. ??overflow:auto；??div內(nèi)容超出顯示滾動條
  5. echarts自適應(yīng)方案
  6. vue自定義指令，監(jiān)控元素寬高大小
  7. 獲取近一周時間
  8. v-md-editor自定義工具欄圖標(biāo)，阿里圖標(biāo)的使用
  9. el-form-item自定義label
<template #label>
   xxxx
</template>
  1. 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>
  1. 路由傳參，query形式
  2. script和script setup一起用，script內(nèi)聲明額外的值，如name屬性
  3. ??Object.keys(state.links).length !== 0??判斷state.links這個對象是否為空

  4. 子組件最頂層用的類名如果在父組件定義了樣式，那么子組件的樣式就會被影響

    ??官方解釋??

  5. 點(diǎn)擊波紋特效
  6. 分頁功能
  7. class動態(tài)綁定
  8. exact-active-class和 active-class
  9. 父組件網(wǎng)絡(luò)請求數(shù)據(jù)后向子組件傳數(shù)據(jù)
<a-component :opt="opt" v-if="opt"></a-component>
  1. 進(jìn)入頁面自動播放音樂問題
  2. vue跳轉(zhuǎn)到頁面指定位置
  3. 自定義鼠標(biāo)樣式，并設(shè)置鼠標(biāo)樣式圖片對齊點(diǎn)
  4. vue中頁面跳轉(zhuǎn)滾動條置頂（總結(jié)）
  5. 字符串?dāng)?shù)組相互轉(zhuǎn)換
  6. js數(shù)組遍歷和篩選
  7. css三角形
  8. 父組件調(diào)用子組件方法
  9. vue路由傳對象
  10. ??watch監(jiān)聽??
  11. 根據(jù)變量動態(tài)取對象的key
var data = {
            "green40": {
                a: 1
            },
            "green40.5": {
                a: 2
            }
        }
        var getkey = 'green40';
 
        // data[getkey]
        console.log(data[getkey].a)
  1. el-tooltip錯位問題：加上??:teleported="false"??
  2. vue3對404配置進(jìn)行了修改,必須要使用正則匹配?? path: '/:pathMatch(.*)*'??
  3. ??text-shadow??
  4. vite動態(tài)路由
  5. ??"../views/**/**.vue"??；兩個**引入所有文件
  6. 導(dǎo)航首位，博客主題切換

  7. element-ui, upload組件

    auto-upload設(shè)置為false的時候，before-upload事件是不起作用的；

    解決辦法：

    使用on-change事件來代替before-upload

  8. 數(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);  //3

Object.keys可以獲取key值

Object.keys(obj)

Object.values可以獲取value值

Object.values(obj)
  1. 對象轉(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));
  1. 與后端交互獲取博客文章展示到頁面后，無法獲取錨點(diǎn)，原因主要在于生命周期，需要把獲取錨點(diǎn)的操作放到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í)行生成錨點(diǎn)的函數(shù)
    GenerateAnchor()
}
// 生成錨點(diǎn)
const GenerateAnchor = () => {...}

普通使用：

nextTick(()=>{
     ....
    })

父子組件通信時，子組件不能實(shí)時展示父組件傳來的數(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;
  });
}

如果是向子組件傳遞了新值后調(diào)用子組件的方法時發(fā)現(xiàn)該方法使用的值還是舊值，此時可以在向子組件傳遞新值后在鉤子函數(shù)里調(diào)用子組件方法

<PaginationVue   
                :data="pagingSearchState.data"
            ></PaginationVue>
const oneClick = () => {
//傳新值
    pagingSearchState.data = state.LeaveWord
    nextTick(() => {
    //子組件方法
        searchClick()
    })
}
  1. ??background-attachment: fixed;??背景圖片固定
  2. 父子組件雙向綁定數(shù)據(jù)


本文摘自 ：https://blog.51cto.com/u

開通會員，享受整站包年服務(wù)立即開通 >
推薦內(nèi)容