之前講解的都是vue1.0的使用，現在我們開始介紹vue2.0，
這里的介紹是在vue1.0的基礎上進行介紹的，主要介紹的是同vue1.0版本相比2.0的變化
vue2.0的變化
1.在每個組件模板中,組件的定義有一點變化且不再支持片段代碼
之前可以寫片段代碼：
<template>
<h3>我是標題</h3>
<strong>我是組件</strong>
</template>
現在--必須有一個根元素來包裹片段代碼
Vue.component('my-aaa',{
template:'#aaa'
});
<template id="aaa">
<div>
<h3>我是標題</h3>
<strong>我是組件</strong>
</div>
</template>
2.vue2.0組件定義的變化：
不再支持Vue.extend()的定義方式,有改動
1)Vue.component在2.0繼續能夠使用,但是不簡潔
Vue.component(組件名稱,{
data(){},
methods:{},
template:''
});
2)vue2.0推薦定義組件的一個簡潔的方法
var Home={ //定義一個json,即是定義的一個組件
template:'#aaa'
}; //相當於vue1.0之前的vue.extend();
Vue.component('my-aaa',Home); //定義好組件之后,需要注冊,componet也可以寫在里面
<template id="aaa">
<div>
<h3>我是標題</h3>
<strong>我是組件</strong>
</div>
</template>
3.變化最大的是vue生命周期的變化
之前：
0)init-->實例剛被創建但是屬性方法什么都沒有
1)created-->實例已經創建,屬性方法已經綁定,但是DOM還沒有生成(實例創建完成執行)
2)beforeCompile-->在實例編譯之前執行
3)compiled-->在編譯之后執行
4)ready-->把數據插入到文檔中時執行 相當於jquery中的window.onload
5)beforeDestroy-->銷毀之前
6)destroyed-->銷毀之后
現在：
0)beforeCreate(){}-->實例剛被創建但是屬性方法什么都沒有
1)created-->實例已經創建,屬性方法已經綁定,但是DOM還沒有生成
2)beforeMount-->模板編譯之前
3)mounted-->模板編譯完成(代替的是之前的compiled,ready兩個過程)
4)beforeUpdate-->組件或者數據更新之前
5)updated-->組件或數據更新完成
6)beforeDestroy-->銷毀之前
7)destroyed-->銷毀之后
4.vue2.0循環的變化
2.0里面默認可以添加重復的數據,之前要添加track-by="$index"
track-by="id"在2.0已經廢棄了
之前：<li v-for="(index,val) in arr" track-by="$index">{{val}}{{$index}}</li>
現在：<li v-for="(val,index) in arr" :key="index">{{val}}{{index}}</li>
去掉一些隱式變量如$index,$key更貼近原生的js語法
之前：<li v-for="(index,val) in arr">{{val}}{{$index}}</li>
現在：<li v-for="(val,index) in arr">{{val}}{{index}}</li>
之前：<li v-for="(key,val) in json">{{val}}{{$key}}</li>
現在：<li v-for="(val,key) in json">{{val}}{{key}}</li>
5.自定義鍵盤的指令
之前：vue.directive('on').keyCodes.ctrl=17;
現在：vue.config.keyCodes.ctrl=17;
6.過濾器的變化
之前自帶許多自帶的過濾器：
{{msg | currency}}
{{msg | json}}
現在2.0把內置的過濾器全部刪除了
除了json直接可以實現，其他的都需要自己自定義過濾器(通過js)實現
自定義過濾器還有,自定義過濾器的傳參發生變化:
自定義過濾器：
vue.filter(function(input){
return input<10?'0'+input:''+input;
});
過濾器傳參變化：
之前：{{msg|toDoch '12' '5'}}
現在：{{msg|toDoch('15','5')}}
7.組件通信的變化
主要用-->vm.$emit(),vm.$on()
子組件與父組件
1）子組件想要拿到父組件的數據
通過props，沒有更改
2）子組件想要更改父組件數據/傳遞數據給父組件
之前：子組件拿到父組件的數據后可以更改父組件的數據,通過sync同步
現在：不允許直接給父級數據做更改
示例1：使用vue2.0進行子組件將數據傳給父組件時會報錯,且父組件數據不會與子組件數據同步
<div id="box">
父級數據-->{{msg}}
<br/>
<child-com :m.sync="msg"></child-com>
</div>
<template id="child">
<div>
<span>我是子組件</span>
<input type="button" value="按鈕" @click="change()">
<strong>{{m}}</strong>
</div>
</template>
new Vue({
el:'#box',
data:{
msg:'我是父組件的數據'
},
components:{
'child-com':{
props:['m'],
template:'#child',
methods:{
change(){
this.m="被更改了！"
}
}
}
}
});
若想改父組件的數據：
1)父組件每次傳一個對象給子組件,在js中對象之間是引用的
<div id="box">
父級數據-->{{giveData.msg}}
<br/>
<child-com :m="giveData"></child-com>
</div>
<template id="child">
<div>
<span>我是子組件</span>
<input type="button" value="按鈕" @click="change()">
<strong>{{m.msg}}</strong>
</div>
</template>
new Vue({
el:'#box',
data:{
giveData:{ //父組件定義一個對象,數據以對象的形式傳給子組件
msg:'我是父組件的數據'
}
},
components:{
'child-com':{
props:['m'],
template:'#child',
methods:{
change(){
this.m.msg="被更改了！" //這里修改的是傳過來對象里的msg屬性
}
}
}
}
});
2)不通過傳對象的方法,只是要求不報錯,可以通過mounted中轉一下
<div id="box">
父級數據-->{{msg}}
<br/>
<child-com :m="msg"></child-com>
</div>
<template id="child">
<div>
<span>我是子組件</span>
<input type="button" value="按鈕" @click="change()">
<strong>{{b}}</strong>
</div>
</template>
new Vue({
el:'#box',
data:{
msg:'我是父組件的數據'
},
components:{
'child-com':{
data(){
return {
b:''
}
},
mounted(){ //通過mounted中轉,把得到的父級數據賦給自己的數據b
this.b=this.m
},
props:['m'],
template:'#child',
methods:{
change(){
this.b="被更改了！" //通過mounted中轉后，這里修改的是自己的數據b
}
}
}
}
});
8.單一事件管理組建的通信
下面這個例子可以實現單一事件組件的通信
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10
11 </style>
12 <script src="vue.js"></script>
13 <script>
14 //准備一個空的實例對象
15 var Event=new Vue(); 16
17
18 var A={ 19 template:` 20 <div>
21 <span>我是A組件</span> -> {{a}}
22 <input type="button" value="把A數據給C" @click="send">
23 </div>
24 `, 25 methods:{ 26 send(){ 27 Event.$emit('a-msg',this.a); 28 } 29 }, 30 data(){ 31 return { 32 a:'我是a數據'
33 } 34 } 35 }; 36 var B={ 37 template:` 38 <div>
39 <span>我是B組件</span> -> {{a}}
40 <input type="button" value="把B數據給C" @click="send">
41 </div>
42 `, 43 methods:{ 44 send(){ 45 Event.$emit('b-msg',this.a); 46 } 47 }, 48 data(){ 49 return { 50 a:'我是b數據'
51 } 52 } 53 }; 54 var C={ 55 template:` 56 <div>
57 <h3>我是C組件</h3>
58 <span>接收過來的A的數據為: {{a}}</span>
59 <br>
60 <span>接收過來的B的數據為: {{b}}</span>
61 </div>
62 `, 63 data(){ 64 return { 65 a:'', 66 b:''
67 } 68 }, 69 mounted(){ 70 //var _this=this;
71 //接收A組件的數據
72 Event.$on('a-msg',function(a){ 73 this.a=a; 74 }.bind(this)); 75
76 //接收B組件的數據
77 Event.$on('b-msg',function(a){ 78 this.b=a; 79 }.bind(this)); 80 } 81 }; 82
83
84 window.onload=function(){ 85 new Vue({ 86 el:'#box', 87 components:{ 88 'com-a':A, 89 'com-b':B, 90 'com-c':C 91 } 92 }); 93 }; 94 </script>
95 </head>
96 <body>
97 <div id="box">
98 <com-a></com-a>
99 <com-b></com-b>
100 <com-c></com-c>
101 </div>
102 </body>
103 </html>
9.debounce也已經廢棄
要想延遲使用
lodash --工具庫(自己了解)
方法：_.debounce(fun,時間)