一些轻微文雅的技能写法，并不黑白的是es6,题目党了哈
为class绑定多个值
- 平常写法
:class="{a: true, b: true}"- 其他
:class="['btn', 'btn2', {a: true, b: false}]"一个值推断a或许推断b
- 平常写法
if(flg === a || flg === b)- 其他
['a','b'].indexOf(flg) > -1
// 能够运用Array.prototype.includes() 返回 Boolean
if(['a', 'b'].includes(flg)) {}援用一个组件
- 平常写法
import a from './a.vue'
componets: {
a
}- node写法
components: {
a: require('./a.vue')
}V-FOR衬着
- 平常
<li v-for="(item,index) in data" :key="index">
{{item.uuid}} //输出uuid字段
</li>- 解构赋值
<li v-for="{uuid} in data" :key="uuid">
{{uuid}} //直接解构赋值输出
</li>CSS私有化
- 平常
设置比较长的class类名辨别，或许运用BEN等定名要领
- css module
<style module>
.h3 {}
</style>style款式会存在$style盘算属性中
//挪用体式格局
<h3 :class="$style.h3"></h3>
//$style是盘算属性，所以也能够如许 bool为Bool表达式
<h3 :class="{$style.h3: bool}"></h3>瑕玷： 天生一个举世无双的class类名，只能运用类名class掌握款式
- scoped
<style scoped>
</style>天生Hash属性标识.且
根元素受
父组件的scoped影响
解决办法
运用
>>>深度选择器
//寻觅div下的款式，包括子组件款式
div >>> .h3 { }对象操纵
对象只管静态化，一旦定义，就不得随便增加新的属性。假如增加属性不可避免，要运用Object.assign要领。
// bad
const a = {};
a.x = 3;
// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });
// good
const a = { x: null };
a.x = 3;假如对象的属性名是动态的，能够在制造对象的时刻，运用属性表达式定义。
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true, //属性表达式 6
};数组、对象参数运用扩大运算符(spread)
衔接多个数组
- 平常
let arr1 = [1,2,3]
let arr2 = [4,6,7]
arr2 = arr2.concat(arr1)- spread 运算符
let arr1 = [1,2,3]
let arr2 = [...arr1,4,6,7]衔接多个json对象
- 平常
var a = { key1: 1, key2: 2 }
var b = Object.assign({}, a, { key3: 3 })
// 末了效果
{key1: 1, key2: 2,key3: 3 }- spread 运算符
var a = { key1: 1, key2: 2 }
var b = {...a, key3: 3}es6盈余参数（rest paramete）
运用reset paramete是地道的
Array实例
- 平常
function a() {
console.log(arguments)
}
a(1,2,3)- es6
function a(...args) {
console.log(args)
}
a(1,2,3)推断数组是不是包括指定值
IE 任何系列都不支撑
- 平常
须要本身写东西函数
- es6
var arr = [1,2,3]
console.log(arr.includes(1)); // true
console.log(arr.includes(4)); // false递次遍历对象key值
IE 任何系列都不支撑
- es6
var obj = { key1: 1, key2: 2, key3: 3 }
Object.keys(obj); // ["key1", "key2", "key3"]递次遍历对象value值
IE 任何系列都不支撑
- es6
var obj = { key1: 1, key2: 2, key3: 3 }
Object.values(obj); // [1,2,3]一行誊写多步操纵
适用于只要两三行简朴操纵
- 旧
var x = 1;
var y = 1
var z = x + y;- 运用逗号操纵符
var z = (x=1, y = 1, x+ y)当你想要在希冀一个表达式的位置包括多个表达式时，能够运用逗号操纵符
