Vue2.0的变化(1)——vue2.0组件定义/生命周期/循环/自定义键盘/过滤器/组件通信的变化
之前讲解的都是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,时间)
