Vue.js 2.0 更新要点-优快云博客

每个组件模板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>

推出一个新的组件
如：

var home={
　　　template:' '  ->   代替了之前的Vue.extend({})的形式，直接把对象抛出来，就认为成是组件了。

}

生命周期
之前：

init　created　　beforeCompile　　compiled　　ready 　　beforeDestroy　　destroyed

现在：

      beforeCreate　　组件实例刚刚被创建，属性都没有

　　　　created　　        组件实例创建完毕，属性已经绑定

　　　　beforeMount　　模板编译之前

　　　　mounted　　　　模板编译之后，代替了之前的ready*

　　　　beforeUpdate　　组件更新之前

　　　　updated　　　　 组件更新完毕

　　　　beforeDestroy　 组件销毁之前

　　　　destroyed         组件销毁后

循环
2.0默认可以添加重复的数据，之前是必须加个track-by=”$index”

　　arr.forEach(function(item,index){　});

　　去掉了一些隐式变量 $index$ key
之前：v-for=”(index,val) in array”
现在：v-for=”(val,index) in array”
track-by=”$index”
变成：
<li v-for="(val,index) in arr" :key="index" >
自定义键盘指令
之前：
Vue.directive("on").keyCodes.ctrl = 17;
现在：
Vue.config.keyCodes.ctrl = 17;
过滤器
内置过滤器都删了
　自定义过滤器还有，但是：
　　　　　　之前：{{msg | toDou ‘12’ ‘5’}}
　　　　　　现在：{{msg | toDou(‘12’,’5’)}}
　　　　　　
组件通信 vm. $emit() vm.$ on()
子级想拿到父级的数据：通过props
　　　　之前子组件可以更改父组件信息，利用
　　　　sync eg: :msg.sync=”change”
　　　　现在不允许
　　　　如何改：
　　　　　　a)父组件每次传一个对象给子组件，对象引用
　　　　　　b)只是追求不报错，可以用mounted的钩子函数，改变自身数据

可以单一事件管理组件通信 ps:vuex以后单独学习

var Event = new Vue();
　Event.$emit('事件名','数据');
　Event.$on('事件名'，function(){　　}.bind(this));

动画
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”

如果一组元素运动，标签换成并且把每个运动元素加个：key=”index”,其他同上

路由vue-router和vue-loader

布局的改变
之前： <a v-link="{path:'/home'}">我是主页</a> 现在：　 <router-link to="/home">我是主页</router-link> 　它会自动解析成a v-link形式　　<router-view> 没变

路由具体写法：

    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一样的。配合起来使用也一样。

路由嵌套

　　　　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'
　　　　　　　});