为 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
引用一个组件
普通写法
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]