前端JS常用的操作

1 Vue中导入外部样式

不污染其他组件的样式导入方法如下，使用import方法导入类似于全局导入，其他组件会被污染。

/* 导入外部样式 */
<style src='test.css' scoped></style>
​
/* 当前组件的样式 */
<style scoped>
.my_style{
    width:100%;
}
</style>

2 ElementUI中显示省略号

el-table上使用tooltip-effect属性，el-table-column上使用show-overflow-tooltip

<el-table 
    tooltip-effect='light'>
    <el-table-column show-overflow-tooltip></el-table-column>
</el-table>

3 UlementUI中格式化日期

 <el-date-picker
    v-model="value"
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="选择日期">
 </el-date-picker>

4 vue中常用的鼠标事件

事件	说明	事件	说明
mouseenter（常用）	进入	mouseleave（常用）	离开
mousedown	按下	mouseup	抬起
mousemove	移动	mouseout	移出
mouseover	在上面	dblclick（常用）	双击

5 判断数据

// 判断undefined
if(typeof(val) == 'undefined'){
    alert('undefined');
}
​
// 判断数组
if( arr instanceof Array){
    alert("Array");
}
​
if(Array.isArray(arr)){
    alert("Array");
}
​

6 Vue中dom树加载完成后执行

this.$nextTick(function(){
    alert("dom 已加载完成!");
})

7 集合运算

let arr1=[1,2,3];
let arr2=[2,3,4];
​
let set1 = new Set(arr1);
let set2 = new Set(arr2);
​
// 并集, "..."表示展开运算符
let union = new Set([...arr1, ...arr2]);
​
// 交集
let inter = new Set(arr1.filter(x=>set2.has(x)));
​
// 差集
let diff = new Set(arr1.filter(x=>!set2.has(x)));

8 获取对象中的数据

// 获取对象中的keys
let keysArr = Object.keys(obj);
// 获取对象中的value
let valArr = Object.values(obj);
​
// 为对象添加属性
let obj = new Objec();
obj['name']=‘张三';
​
let attrAge = 'age';
obj[attrAge]=10;