最近移动端项目版本升级，Vue由之前的1.0升级到2.3，那么，Vue2.0之后，有哪些细节的变化呢，现在总结如下:
1、在每个组件模板，不再支持片段代码
组件中模板:
之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template>
现在: 必须有根元素，包裹住所有的代码 <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:'' -> Vue.extend()
};
3、生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
现在:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
4、循环
2.0里面默认就可以添加重复数据 arr.forEach(function(item,index){ }); 去掉了隐式一些变量 $index $key 之前: v-for="(index,val) in array" 现在: v-for="(val,index) in array" track-by="id" 变成 <li v-for="(val,index) in list" :key="index">
5、自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17
6、过滤器
之前:
系统就自带很多过滤
{{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
之前，子组件可以更改父组件信息，可以是同步 sync
现在，不允许直接给父级的数据，做赋值操作
问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转
------------------------------------------------------
可以单一事件管理组件通信: vuex
var Event=new Vue();
Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));
8、延迟
debounce 废弃
-> lodash
_.debounce(fn,时间)
9、动画
transition 之前 属性 <p transition="fade"></p>
class定义 .fade-transition{} .fade-enter{} .fade-leave{} 到2.0以后 transition 组件 <transition name="fade"> 运动东西(元素，属性、路由....) </transition> class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示) .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失) 如何animate.css配合用 <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <p v-show="show"></p> </transition> 多个元素运动 <transition-group enter-active-class="" leave-active-class=""> <p :key=""></p> <p :key=""></p> </transition-group>
10、路由
基本使用: 1. 布局 <router-link to="/home">主页</router-link> <router-view></router-view>
2. 路由具体写法 //组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻</h3>' }; //配置路由 const routes=[ {path:'/home', componet:Home}, {path:'/news', componet:News}, ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' });
3. 重定向 之前 router.rediect 废弃了 {path:'*', redirect:'/home'} 路由嵌套: /user/username const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ //核心 {path:'username', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ]; ------------------------------------------ /user/strive/age/10 :id :username :age ------------------------------------------ 路由实例方法: router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个 router.replace({path:'news'}) //替换路由，不会往历史记录里面添加