APP
近段时间正在用vite和vue3开发博客框架，开发中遇到了一些遗忘的知识点和难点在此记录一下，后续对此进行展开补充
- duration属性，css3定义动画时长（transition）
- cmd mongod启动mongodb
- vue双击事件@dblclick
- 异步组件
- 路由懒加载
- vue3图片懒加载插件：vue3-lazy
- vue2图片懒加载插件：vue-lazyload
// 背景模糊
// filter: blur(3px);
- vue3父子组件传值
- 两种定时器
- vue3动态获取vuex里的数据可以不用mapState，直接
user: computed(() => store.state.themeDefault.user)当需要获取多个数据可以用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;让左间距自适应，实现div右对齐 -
overflow:auto；div内容超出显示滚动条 - echarts自适应方案
- vue自定义指令，监控元素宽高大小
- 获取近一周时间
- v-md-editor自定义工具栏图标，阿里图标的使用
- el-form-item自定义label
<template #label>
xxxx
</template>
- vue3
keep-alivetransition 的使用
<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动态绑定
- exact-active-class和 active-class
- 父组件网络请求数据后向子组件传数据
<a-component :opt="opt" v-if="opt"></a-component>
- 进入页面自动播放音乐问题
- vue跳转到页面指定位置
- 自定义鼠标样式，并设置鼠标样式图片对齐点
- vue中页面跳转滚动条置顶（总结）
- 字符串数组相互转换
- js数组遍历和筛选
- css三角形
- 父组件调用子组件方法
- vue路由传对象
- watch监听
- 根据变量动态取对象的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动态路由
-
"../views/**/**.vue"；两个**引入所有文件 - 导航首位，博客主题切换
element-ui, upload组件
auto-upload设置为false的时候，before-upload事件是不起作用的；
解决办法：
使用on-change事件来代替before-upload
- 数组倒叙：
数组.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)
- 对象转数组
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钩子函数
import { nextTick } from 'vue'配合异步：
async function getBlog() {
//发送请求
const res = await request.getBlogById(route.params.id)
state.blog = res.Msg
await nextTick()
//执行生成锚点的函数
GenerateAnchor()
}
// 生成锚点
const GenerateAnchor = () => {...}
普通使用：
nextTick(()=>{
....
})
父子组件通信时，子组件不能实时展示父组件传来的数据解决办法：
子组件用v-if来判断是否展示子组件，在父组件向子组件传递新的值之前先利用v-if将子组件隐藏，向子组件传过新值之后再重新显示子组件
<Category-every :category="category" v-if="flag"></Category-every>
const select=(category)=> {
flag.value = false;
category.value = category
//钩子函数
nextTick(() => {
flag.value = true;
});
}如果是向子组件传递了新值后调用子组件的方法时发现该方法使用的值还是旧值，此时可以在向子组件传递新值后在钩子函数里调用子组件方法
<PaginationVue
:data="pagingSearchState.data"
></PaginationVue>
const oneClick = () => {
//传新值
pagingSearchState.data = state.LeaveWord
nextTick(() => {
//子组件方法
searchClick()
})
}-
background-attachment: fixed;背景图片固定 - 父子组件双向绑定数据
本文摘自 ：https://blog.51cto.com/u
