vue2.0的变化,与vue1.0对比
1.在每个组建的模板中,不再支持片段代码。2.关于组件的定义3.生命周期4.Vue2.0循环5.自定义键盘的指令6.过滤器7.组件通信8.可以使用一个"单一事件"管理组件通信
1.在每个组建的模板中,不再支持片段代码。
组件中模板:
Vue1.0:
<template>
<h3>我是组件</h3><strong>我是加粗</strong>
</template>
Vue2.0:必须有一个根元素,包裹所有的元素
<template id=‘aaa'’>
<div>
<h3>我是组件</h3>
<strong>我是加粗</strong>
</div>
</template>
2.关于组件的定义
Vue.extend 这种方式,在2.0里面有,但是有一些改动,这种写法虽然可以用,但是尽量少用
Vue.component(组件名称,{ // 在2.0继续能用
data(){}
methods{}
template:
});
2.0推出一个组件的简洁定义的方式:
var Home={
template:''
};
3.生命周期
Vue1.0:
init
created
beforeCompile
compiled
ready
beforeDestroy
destroyed
Vue2.0:
beforeCreate: 组件实例刚刚被创建,属性都没有
created: 实例已经创建完成,属性已经绑定
beforeMount: 模板编译之前
mounted: 模板编译完成(代替之前的cimpiled和ready两个状态)
beforeUpdate: 组件更新之前
updated: 组件更新完毕
beforeDestroy: 组件销毁前
destroyed: 组件销毁后
4.Vue2.0循环
1.0里面:v-for="val in list"想要添加重复的数据:track-by="$index"
2.0里面:
1)默认可以添加重复的数据
2)去掉了隐式的变量,如$index,$key,在Vue2.0中 v-for="(val,index) in list :index"
在json中,v-for="(val,key) in json"
5.自定义键盘的指令
1.0里面:Vue.direction('on').keyCodes.f1=12;
2.0里面:Vue.config.keyCodes.ctrl=17;
6.过滤器
1.0里面:
系统自带很多过滤器
{{msg |currency}}
{{msg |json}}
....
limitBy
filterBy
一些简单的功能,自己通过js实现
2.0里面:
内置过滤器,全部删除了
lodash工具库:_.debounce(fn,200)
自定义过滤器:还存在
但是,自定义过滤器传参,
之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
7.组件通信:
vm.$emit()
vm.$on();
父组件和子组件:
子组件想要拿到父组件的数据:
通过 props:[]
Vue1.0:子组件可以更改父组件的信息,可以使同步的sync
现在:不允许直接给父级的数据,进行赋值操作
满足下面的条件时可以修改:
a).父组件每次传一个对象给子组件,对象之间是引用的 最靠谱的方式
b).只是不报错,mounted中转
8.可以使用一个"单一事件"管理组件通信
var Event = new Vue();
Event.$emit(事件名称,数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));
更多推荐
所有评论(0)