4c21a75a8ac95334ca3f09719caa4.jpg
vue1.0学完了。对比课件整理一下2.0的改变。还是挺多的
组件
1、template写法
1.0 支持片段代码
<template id="aaa">
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</template>
2.0必须用根元素包裹住代码段
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
2、组件注册
1.0 ---Vue.extend生成对象然后注册
var Aaa=Vue.extend({
//直接显示
template:"<h3 @click='change'>我是标题3</h3>",
//显示数据
//****data必须是函数的形式，函数必须返回一个对象(json)
data(){
return {
msg:'数据MSG'
}
},
//添加方法
methods:{
change(){
this.msg="changed";
}
}
});
2.0 ---直接生成对象然后注册
var Home={
template:'',
data(){},
method(){}
};
注册保持不变
//全局
Vue.component('aaa',Aaa)
//局部
//vue中
components:{ //局部组件
'aaa':Aaa
}
生命周期
1.0
created -> 实例已经创建
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
2.0
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
循环
1、重复添加
1.0
track-by="$index"2.0
默认可以重复添加
2、隐式变量
1.0
v-for="(val,index) in array" v-for="(val,key) in array" track-by="id"//提升性能 @click="changeImgForCarousel(index)"//方法传入index2.0---更加贴近原生
v-for="(val,index) in array" v-for="(val,key) in array" :key="index"//提升性能
自定义键盘事件
1.0
Vue.directive('on').keyCodes.f1=17;2.0
Vue.config.keyCodes.ctrl=17;
过滤器
2.0
删除了全部1.0自带过滤器
json改为默认配置自定义过滤器
之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
组件通信
父子组件通信
1.0
子组件可以更改父组件信息(可以是同步.sync)
2.0
不允许直接给父级的数据，做赋值操作
如果非要修改：同步:父组件每次传一个对象给子组件, 对象之间引用
非同步:子组件中以属性承接、直接修改子组件属性
兄弟组件通信
2.0
//注册一个空的Vue对象作为媒介 var Event=new Vue(); //发送数据 Event.$emit('msg-name', msg) //接收数据 Event.$on('msg-name',function(msg){
msg
}.bind(this));
动画
由1.0中的属性。改为2.0中的<transition>标签
//以name作为自定义动画关联名 <transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave">
<p v-show="show"></p>
</transition>
//style的标签名也发生了变化
<style>
p{
width:300px;
height:300px;
background: red;
}
//动画运行时间
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
}
//显示动画结束状态
.fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
//消失动画结束状态
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
}
//动画初始状态
.fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
配合animate.css
<transition
enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
//或者---animated也可以直接给元素添加
<transition
enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition>
动画组<transition-group>标签
<transition-group
enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight">
//:key=''是元素运动的必须属性
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="1"></p>
</transition-group>