vue2.0变化(转载)

原文链接：https://www.cnblogs.com/itbainianmei/p/6062249.html

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

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有