(1)在使用对象传参的时候,看到前辈用了Object.assign()方法。
Object.assign(target,...sources)
target:目标对象
sources:源对象
作用:将源对象中的可枚举属性添加(复制)到目标对象中,并将返回目标对象。
注意:如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
有待补充:xxx
(2)在用v-for遍历时,我有这样一个需求:需要对象最后两项数据,length为5。其是做一个模块蒙版的背景颜色,让蒙版实现渐变颜色。我如何能够实现在这个v-for里读取最后两项数据,并执行颜色渐变。
<span
v-for="(color,index) in theme.defaultTheme"
:style="{ background: index !== 3 ? 'rgba(' + color + ')' : ' ' }">
</span>
</span>
需求未实现,有待改进。
实现思路:将第5个模块的宽度设置为0,将第4个模块的background设置为`linear-gradient(0deg,rgba${color1}0%,rgba(${color2}) 100%)`
(3)在页面构思设计的时候不要将组件分的太细腻,许多功能就是耦合在一起的,需要适当的划分组件
(4)在父子组件通信时:
父组件:<qn-bg :BackgroundData.sync="BackgroundData"></qn-bg>
.sync语法糖:取代 @event 其等价于@update=“BackgroundData”
子组件:this.$emit('update:value',this.Theme);//param1:触发的父组件事件,param2:数据
这样将数据通过事件订阅的形式实现父子组件之间的通信。
(5)在给一个使用vue中使用:style=""时要熟悉用三元表达式eg:
:style="index === 4 ? 'active' : ' '"//当在v-for中实现某一项某些数据与其他数据不同时,使用:style动态效果