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

引用一个

普通写法

import a from './a.vue'
componets: {
    a
}

node写法

components: {
    a: require('./a.vue')
}

v-for渲染

一般

• {{item.uuid}} //输出uuid字段
• 解构赋值
  • {{uuid}} //直接解构赋值输出

  css私有化

  一般

  设置比较长的class类名区分，或者使用ben等命名方法

  css module

  .h3 {}

  style样式会存在$style计算属性中

  //调用方式
  

   

  //$style是计算属性，所以也可以这样 bool为bool表达式

   

  缺点： 生成一个独一无二的class类名，只能使用类名class控制样式

  scoped

  生成hash属性标识.且根元素受父组件的scoped影响

  解决办法

  使用>>>深度选择器

  //寻找p下的样式，包括子组件样式
  p >>> .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]