为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方法。// badconst a = {};a.x = 3;// if reshape unavoidableconst a = {};Object.assign(a, { x: 3 });// goodconst a = { x: null };a.x = 3;如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。// badconst obj = { id: 5, name: ‘San Francisco’,};obj[getKey(’enabled’)] = true;// goodconst 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)es6function a(…args) { console.log(args)}a(1,2,3)判断数组是否包含指定值IE 任何系列都不支持一般需要自己写工具函数es6var arr = [1,2,3]console.log(arr.includes(1)); // trueconsole.log(arr.includes(4)); // false顺序遍历对象key值IE 任何系列都不支持es6var obj = { key1: 1, key2: 2, key3: 3 }Object.keys(obj); // [“key1”, “key2”, “key3”]顺序遍历对象value值IE 任何系列都不支持es6var obj = { key1: 1, key2: 2, key3: 3 }Object.values(obj); // [1,2,3]