爲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]