工作常用小知识

data中数据重置

  将vue中data里的form中的所有数据重置为初始状态

    1.this.from=this.$options.data().from

    2.Object.assign(this.$data, this.$options.data());

组件传值

子组件调用父组件的方法，并传递数据

this.$parent.父组件方法名(需要传递的数据)

父组件调用子组件的方法，并传递数据

ths.$refs.ref的名.子组件的方法(需要传递的数据)

弹性布局

竖向排列：flex-direction: column;

两端对齐，两端不留缝隙：justify-content: space-between;

横向排列上下对齐：align-items: center;

flex-direction: 设置主轴方向

row 行排列，x轴 默认值，从左到右排列

row-reverse 从右到左排列    colum 列排列，y轴，从上到下排列

colum 从下到上排列

justify-content: 设置对齐方式

flex-start 默认值，开始位置

flex-end 结束位置

center 居中

space-around 环绕对齐，空白区域在元素左右平均分布，两端也有间隙

space-between 环绕对齐，空白区域在元素左右平均分布，两端没有间隙

space-evenly 空白区域在元素间隙平分，包括左右两端

flex-wrap: 设置换行

nowrap 默认值，不换行，溢出挤压

wrap 换行，当父元素有确定高度时，默认在父元素空白区域居中换行，没有高度时则直接换行

wrap-reverse 往反方向换行

align=content: 设置侧轴方向排列方式，值同justify-content    把所有行当作一个整体对齐

align-items: 设置侧轴方向排列方式    把每一行当作一个整体

flex-flow: 主轴方向，是否换行

鼠标悬浮变小手

style="cursor:pointer"

循环便利对象

取键值
const fruits ={    appple:22,    pear:34,    orange:88}

var keys = Object.keys(fruits);

console.log(keys);  //["appple", "pear", "orange"]

取所有键值对应的的数据

const fruits ={    appple:22,    pear:34,    orange:88}

var values =Object.values(fruits);

console.log(values); //[22, 34, 88]

改写对象为数组形式

const fruits ={    appple:22,    pear:34,    orange:88}

var entries = Object.entries(fruits);

console.log(entries);//[ ["appple,22"],["pear",34],["arange",88] ]

解析对象以文本展示出来

const fruits ={    appple:22,    pear:34,    orange:88}

for (const [fruit,num] of entries) {

console.log(`we have ${num} ${fruit}`);  //we have 22 appple ...

}