Vue以前听说过，有了解过一点。当时还在热衷于原生java script去写一些方法的封装，不是为啥，就感觉这样很帅，后面多多少少接触了一些JQuery的用法，到现在为止，java script原生封装的一些方法，该忘的都忘了。上一家公司需要用到Vue，所以就利用下班的时候学习Vue。有次公司部门的培训，一位大佬总结的实用技巧，感觉不错，在这里记录下来，方便以后查询，也与大家分享。

阮一峰老师写的：http://es6.ruanyifeng.com/

1、ES6新特性概览

2、Vue基础知识

3、Vue组件开发

4、Vue实用技巧

ES6新特性概览

1、箭头函数

var array = [1, 2, 3]; 

// 传统写法 
array.forEach(function(v, i, a){ 
    console.log(v); 
}); 

// ES6 
array.forEach(v = > console.log(v));

2、类的支持

class Animal {  
　　constructor(name) { 
    this.name = name; 
}  
sayName() { 
    console.log('My name is ' + this.name); 
} 
}
 
class Programmer extends Animal { 
constructor(name) { 
    super(name); // 直接调用父类构造器进行初始化 
} 
program() { 
    console.log("I'm coding..."); 
} 
}
 
var animal = new Animal('dummy'), wayou = new Programmer('wayou'); 
animal.sayName(); // 输出 'My name is dummy' 
wayou.sayName();  // 输出 'My name is wayou' 
wayou.program();  // 输出 'I'm coding...'

3、字符串模板

// 产生一个随机数
var num = Math.random();

// 输出数字
console.log(`your num is ${num}`);

4、解构

var [x,y] = getVal(), // 函数返回值的解构
[name,,age] = ['wayou','male','secrect']; // 数组解构

function getVal() {
    return [ 1, 2 ];
}

console.log(`x:${x},y:${y}`); console.log(`name:${name},age:${age}`);

5、默认参数值

// 传统的指定默认参数的方式
function sayHello(name){    
    var name = name || 'dude';
    console.log('Hello ' + name);
}

// 运用ES6的默认参数
function sayHello2(name = 'dude'){
    console.log(`Hello ${name}`);
}

6、不定参数

// 将所有参数相加的函数
function add(...x){
    return x.reduce((m,n) => m + n);
}

// 传递任意个数的参数
console.log(add(1,2,3)); // 输出：6
console.log(add(1,2,3,4,5)); // 输出：15

7、扩展参数

var peoples = ['Wayou','John','Sherlock'];

function sayHello(peo1,peo2,peo3){
    console.log(`Hello ${peo1},${peo2},${peo3}`);
}

sayHello(...peoples); // 输出：Hello Wayou,John,Sherlock

8、let与const关键字

for(let i = 0; i < 2 ; i++){
    console.log(i);
}

console.log(i); 

9、for of值遍历

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v); // 输出:a,b,c
}

10、Set与Map集合

var s = new Set();
s.add("hello").add("goodbye").add("hello");
console.log(s.size);
console.log(s.has("hello"));

var m = new Map();
m.set("hello", 42);
m.set(s, 34);
console.log(m.get(s));

数组去重：[…new Set([1,2,3,3])]//如果数组里面的值是对象的话，就不可以了。

11、Proxy，Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作

// 定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };

// 定义处理程序
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};

engineer = Proxy(engineer, interceptor); // 创建代理以进行侦听
engineer.salary = 60; // 控制台输出：salary is changed to 60

Vue基础知识

模板语法：

1、文本

<span>Message: {{ msg }}</span>
<span v-once>这个将不会改变: {{ msg }}</span>

2、特性

<div v-bind:id="dynamicId"></div>

3、修饰符，事件修饰符、按键修饰符、系统修饰符

4、HTML

<span v-html="rawHtml"></span>

5、表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

6、缩写

<a :href="url">...</a>
<a @click="doSomething">...</a>

7计算属性和侦听器

computed: {
    reverse