vue2.0有哪些变化
- vue2.0之后有哪些变化：
1.每个组件模板template,不再支持片段代码
之前：
<template>
<h3>vue-router+vue-loader</h3>
<p>hshsh</p>
</template>
现在：必须有根元素
<template>
<div>
<h3>vue-router+vue-loader</h3>
<p>hshsh</p>
</div>
</template>
2.推出一个新的组件 如var home={
template:' ' -> 代替了之前的Vue.extend({})的形式，直接把对象抛出来，就认为成是组件了。
}
3.生命周期
之前：
init created beforeCompile compiled ready beforeDestroy destroyed
现在：
beforeCreate 组件实例刚刚被创建，属性都没有
created 组件实例创建完毕，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替了之前的ready*
beforeUpdate 组件更新之前
updated 组件更新完毕
beforeDestroy 组件销毁之前
destroyed 组件销毁后
4.循环
2.0默认可以添加重复的数据，之前是必须加个track-by="$index"
arr.forEach(function(item,index){ });
去掉了一些隐式变量 $index $key
之前：v-for="(index,val) in array"
现在：v-for="(val,index) in array"
5.track-by="$index"
变成<li v-for="(val,index) in arr" :key="index" >
6.自定义键盘指令
之前：Vue.directive("on").keyCodes.ctrl = 17;
现在：Vue.config.keyCodes.ctrl = 17;
7.过滤器
内置过滤器都删了
自定义过滤器还有，但是：
之前：{{msg | toDou '12' '5'}}
现在：{{msg | toDou('12','5')}}
8.组件通信 vm.$emit() vm.$on()
子级想拿到父级的数据：通过props
之前子组件可以更改父组件信息，利用sync eg: :msg.sync="change"
现在不允许
如何改：
a)父组件每次传一个对象给子组件，对象引用
b)只是追求不报错，可以用mounted的钩子函数，改变自身数据
9.可以单一事件管理组件通信 ps:vuex以后单独学习
var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名'，function(){ }.bind(this));
10.动画
transition不再是属性：transition="fade"
而是像模板一样的标签了<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素，属性，路由。。。</transition>
.fade-enter-active,.fade-leave-active{transition:1s all ease;}
.fade-enter 初始状态
.fade-enter-active 变成什么样，元素显示出来的时候
.fade-leave
.fade-leave -active 变成什么样，元素离开的时候
配合animate.css使用：把fade和name去掉。给transition加enter-active-class="zoomInleft" leave-active-class="zoomOutRight",给运动的元素本身加class="animated"
如果一组元素运动，标签换成<transition-group></transition-group>并且把每个运动元素加个：key="index",其他同上
11.路由vue-router和vue-loader
路由改变：
1.布局的改变
之前：<a v-link="{path:'/home'}">我是主页</a>
现在：<router-link to="/home">我是主页</router-link> 它会自动解析成a v-link形式
<router-view>没变
2.路由具体写法：
var Home ={ //准备组件
template:'<h3>我是主页</h3>'
}
const routes = [ //配置路由
{path:'/home',component:Home}，
{path:'*',redirect:'/home'} //重定向
...一个个json
];
const router = new VueRouter({routes:routes}); //生成路由实例 简写成对象的形式 ：const router = new VueRouter({routes});
new Vue({ //最后挂到vue上
router,
el:'#box'
});
vue-loader一样的。配合起来使用也一样。
12.路由嵌套
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'/news',component:News,
children:[
{path:'/newsname',component:newsNameDetail},
{}
]
}，
{path:'*',redirect:'/home'} //重定向
...一个个json
];
带有参数的路由配置
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/user/strive/age/10">Strive</router-link></li>
<li><router-link to="/user/blue/age/80">Blue</router-link></li>
<li><router-link to="/user/eric/age/70">Eric</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
};
var UserDetail={
template:'<div>{{$route.params}}</div>'
};
//配置路由
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[
{path:':username/age/:age', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#box'
});
