开发项目中遇到的问题
css
last-child
和first-child
失效问题:
如果父亲元素里的子元素有包含其他不一样的标签时,会出现获取不到的问题。
当使用first的话,第一个子元素一定要是一样的标签.中间和最后可以是不一样的标签.
last最后一个元素标签要一致,前面和中间可以是不一样标签。
除了这些伪类,同样,其他的伪类在这种情况无法获取到。
vue
- 在使用
this.$router.push
实现路径跳转时,会延迟好几秒;
是因为query属性的原因,当query对象属性以及属性值内容太多时,会增长路径拼接的速度。 - 在使用图片的时候,直接使用开发环境的路径在标签内使用图片或者在css中使用背景图片都会无法显示。
第一种情况可以提前加载图片require(url)
- css中给元素添加背景图,
background: url(~@/img/page.png)
~是相对于其他路径(文件)的,类似于相对路径
所以background正常使用相对路径也是ok的。
vue之computed
computed是计算出来的属性, 相当于计算结果, 所以我们不能直接对结果进行修改!
- getter函数
负责使用data中的数据, 但是注意 只能用, 不能改! 使用完后 记得将结果return- setter函数
有一个参数 newValue, 负责接收传进来的值, 可以使用这个newValue给data中的数据进行操作:- 给computed创建的属性赋值,其实是传参给setter函数,触发set事件
现在有个需求: 想给options里添加新的数据, 如何操作?
// 1. 需要用到set函数:
computed {
objArr: {
get() {
return this.options;},
set(newValue) {
console.log('newValue', newValue)
this.options.push(newValue);
}
}
}
// 2. 触发set函数 即给objArr赋值:
// 这里我们封装个方法:
methods: {
setObjArr() {
this.objArr = {
b: 2}
}
}
// 通过按钮点击触发
<button @click="setObjArr">set</button>
/**这里的this.objArr = { b: 2 }并不是把{b: 2} 赋值给objArr的意思, 而是传参给里面的set函数。
触发setObjArr事件, 会发现 计算属性 objArr 已经改变了, 其本质是因为data中的options发生了改变。**/
provide 和 inject 之响应式
provide和inject :provide并不是响应式的,当子组件inject的时候已经丢失了响应式功能
希望整个数据都是响应式的—provide提供一个函数
。
函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。
父组件:
provide() {
return {
getActiveSecurityType: () => ({
activeSecurityType: this.securityType
})
}
},
孙后代组件:
inject: ['getActiveSecurityType'],
computed: {
activeSecurityType() {
return this.getActiveSecurityType();
},
},
}
watch: {
activeSecurityType(newVal) {
}
}
form校验
- validate:
对整个表单进行校验的方法,参数为一个回调函数。
该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。
若不传入回调函数,则会返回一个 promise
Function(callback: Function(boolean, object))
- validateField:
对部分表单字段进行校验的方法
Function(props: array | string, callback: Function(errorMessage: string))
<template>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
size="mini"
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.trim="form.name"></el-input>
</el-form-item>
<el-form-item
label="年龄"