首页 > 代码库 > Vue版本过渡变化
Vue版本过渡变化
到了2.0以后，有哪些变化：
- 在每个组件模板，不在支持片段代码
之前:
<template id=”aaa”> <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推出一个组件，简洁定义方式：类似于Vue.extend()
var Home={ template:‘#aaa‘ }; Vue.component(‘my-aaa‘,Home);
3、关于生命周期
之前:
created： 当new Vue执行后，即实例已经创建时执行
beforeCompile：当开始编译HTML页面所有的Vue语法之前执行
compiled： 当编译HTML页面所有的Vue语法结束之后执行
ready： 当编译结束后把所有元素挂到Dom树，即插入到文档中后执行
beforeDestroy : 销毁之前
destroyed : 销毁之后
现在：
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前，页面的｛｛｝｝未替换
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
4、关于生命周期v-for
2.0里面默认就可以添加重复数据，不需要使用track-by=‘$index/uid‘
去掉了隐式一些变量 $index $key
之前: index表示下标，val表示当前的值
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.ctrl=17;
现在:
Vue.config.keyCodes.ctrl=17
6、关于过滤器，推荐自定义写法
之前:
系统就自带很多过滤
{{msg | currency}} {{msg | json}} limitBy filterBy
到了2.0， 内置过滤器，全部删除了，
推荐使用lodash 工具库
自定义过滤器——还有 但是,自定义过滤器传参变化
之前: {{msg | toDou ‘12‘ ‘5‘}}
现在: {{msg | toDou(‘12‘,‘5‘)}}
7、关于父子组件直接的数据交互
子组件想要拿到父组件数据: 通过 props
之前：
子组件可以更改父组件信息，可以是同步 sync
现在：
不允许直接给父级的数据，做赋值操作
解决办法：
a). 父组件每次传一个对象给子组件, 对象之间引用 。将数据变成对象
b). 只是不报错, mounted中转，将数据赋值后更改，不直接更改
8、可以单一事件管理组件通信: vuex
在全局定义一个vue对象
var Event=new Vue();
在发送出数据的组件内定义一个方法，点击触发。调用vue对象中的$emit
send(){ Event.$emit (‘a-msg‘,this.a); }
Event.$emit(事件名称, 数据)
在接收数据的组件中调用调用vue对象中的$on进行接收数据
Event.$on(‘a-msg‘,function(a){ this.a=a; }.bind(this)); Event.$on(事件名称,function(data){ //data }.bind(this));
9、动画过渡
之前： transition 作为一个属性使用
HTML元素：<p transition="fade"></p> 定义CSS：.fade-transition{} .fade-enter{} .fade-leave{}
现在：transition 作为一个组件HTML标签
<transition name="fade"> 需要运动的对象(可以是元素，属性、路由....) </transition>
定义CSS:
.fade-enter{} //初始状态，即目标元素原本的状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示)的时候的状态 .fade-leave{} //离开前的状态 .fade-leave-active{} //变成成什么样 -> 当元素离开(消失)的时候的状态
例子：
<transition name="fade"><p v-show="show"></p> </transition> .fade-enter-active, .fade-leave-active{ //定义总的动画时间 transition: 1s all ease; } .fade-enter,.fade-leave{ //动画前的状态 opacity:0; width:100px; height:100px; } .fade-enter-active{ //目标元素出现（显示）时的动画 opacity:1; width:300px; height:300px; } .fade-leave-active{ //目标元素消失（隐藏）时的动画 opacity:0; width:100px; height:100px; }
transition内部具备多个方法函数：后面跟的·是一个方法
@before-enter="beforeEnter" 显示前触发
@enter="enter" 显示时触发
@after-enter="afterEnter" 显示后触发
@before-leave="beforeLeave" 消失前触发
@leave="leave" 消失时触发
@after-leave="afterLeave" 消失后触发
方法名不可改变，每个方法函数可传入el值，表示当前动画对象
例子：
<transition name="fade @before-enter="beforeEnter" > </transition>
methods:{ beforeEnter(el){ //定义动画之前的方法，el表示动画对象 console.log(‘动画enter之前‘); }, }
如何animate.css配合用？
直接在transition标签内调用animate.css的class样式
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight"> <p v-show="show" class="animated"></p> //调用animated </transition>
当一个transition内有多个元素需要使用动画时，使用transition-group，并且使用 :key 标注顺序
例子一：
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated" :key="1"></p> <p v-show="show" class="animated" :key="2"></p> </transition-group>
例子二：
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index"> {{val}} </p> </transition-group>
10、关于路由
基本使用:
1. 布局
<router-link to="/home">主页</router-link> //不再使用a标签 <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 //相当于routes ：routes }); //最后挂到vue上 new Vue({ router, //相当于 router：router el:‘#box‘ });
3. 重定向redirect
之前 router.rediect 废弃了
{path:‘*‘, redirect:‘/home‘}
// *表示任何一个路由链接，当找不到路由的情况下也会跳转到这个位置
路由嵌套 : children
<router-link to="/user/username">跳转到子路由</router-link> const routes=[ //配置路由对应的组件 {path:‘/home‘, component:Home}, { path:‘/user‘, component:User, children:[ //写在嵌套的路由里面，使用children {path:‘username‘, component:UserDetail} ] }, {path:‘*‘, redirect:‘/home‘} //404错误默认跳转 ];
路由之间的数据携带：$route.params
<router-link to="/user/strive/age/10">Strive</router-link> //注意链接{path:‘:username/age/:age‘, component:UserDetail} //使用：表示携带数据 <div>{{$route.params}}</div> //页面展示该路由携带的数据
路由实例方法: 表现为是否产生历史记录
router.push({path:‘home‘}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:‘news‘}) //替换路由，不会往历史记录里面添加
例子：
methods:{
push(){ router.push({path:‘home‘}); },
replace(){ router.replace({path:‘user‘}); }
}
给路由切换添加动画：使用animate.css
直接将 <router-view></router-view>放在transition 标签内
例子：
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <router-view></router-view> </transition>
11、关于脚手架
添加路由命令：npm install vue-router --save
main.js文件内发生变化，本质上没有区别，其他都一样写法
之前：
new Vue({ el: ‘#app‘, components:{App} })
现在：
new Vue({ el: ‘#app‘, render: h => h(App) })
在vue-loader里面为路由添加动画
1、直接在index.html页面引入
2、在main.js顶部引入，直接打包成一个文件
注意：需要另外按照style-loader css-loader两个模块
命令行：npm install style-loader css-loader
并在webpack.config.js文件中配置
{ test: /\.css$/, loader: ‘style!css‘ //顺序定死的 }
例子：
import ‘./assets/css/animate.css‘;
12、关于与后台的数据交互
推荐使用axios
跟vue-resourse使用方式完全一样
命令行安装：npm install axios --save-dev
页面引入： import axios from “axios”
Vue版本过渡变化