Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化
之前讲解的都是vue1.0的使用，现在我们开始介绍vue2.0，
这里的介绍是在vue1.0的基础上进行介绍的，主要介绍的是同vue1.0版本相比2.0的变化
vue2.0动画的变化:
现在变成:
<transition>
运动东西(元素,属性,路由.....);
</transition>
class的定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 --当元素出来(显示)
.fade-leave{} //可不写
.fade-leve-active{} //变化成什么样 --当元素离开(隐藏)
vue2.0给transition动画加的默认事件
@before-enter="beforeEnter" //动画enter进入之前
@enter="enter" //动画enter进入中
@afterEnter="afterEnter" //动画enter进入之后
@beforeLeave="beforeLeave" //动画leave离开之前
@leave="leave" //动画leave离开中
@afterLeave="afterLeave" //动画leave离开之后
并且每个事件都有el参数,表示当前元素
beforeEnter(el){}
transition如何与animate.css配合用？
transition只能让其下面第一层元素运动
1)让一个元素运动时
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div class="div1" v-show="show"></div>
</transition>
</div>
2)多个元素运动时,要用transition-group,并且绑定key 属性
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition-group enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div class="div1" v-show="show" :key="1"></div>
<div class="div1" v-show="show" :key="2"></div>
</transition-group>
</div>
<script>
new Vue({
el:'#box',
data:{
show:false
}
});
</script>
transition与animate.css结合使用示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10 p{
11 width:100px;
12 height:100px;
13 background: red;
14 margin:10px auto;
15 }
16 </style>
17 <script src="vue.js"></script>
18 <link rel="stylesheet" href="animate.css">
19 <script>
20 window.onload=function(){
21 new Vue({
22 el:'#box',
23 data:{
24 show:'',
25 list:['apple','banana','orange','pear']
26 },
27 computed:{
28 lists:function(){
29 var arr=[];
30 this.list.forEach(function(val){
31 if(val.indexOf(this.show)!=-1){ //indexOf查找在数组中返回的位置,没有查找到则返回-1
32 arr.push(val);
33 }
34 }.bind(this));
35 return arr;
36 }
37 }
38 });
39 };
40 </script>
41 </head>
42 <body>
43 <div id="box">
44 <span>请在文本框中输入字母a,b,c,e,o等</span>
45 <br/><br/>
46 <input type="text" v-model="show">
47
48 <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
49 <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
50 {{val}}
51 </p>
52 </transition-group>
53 </div>
54 </body>
55 </html>
vue-2.0路由变化：
网站：http://router.vuejs.org/zh-cn/index.html
下载vue-router#2.0-->bower install vue-router
vue-router2.0变化:
布局变化：
<div id="box">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
js变化：
<script>
//准备组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
//配置路由
var routes=[
{path:'/home',component:Home},
{path:'/News',component:News},
{path:'*',redirect:'/home'} //重定向,默认打开的是主页,之前的router.reditect已经废弃
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#box'
});
</script>
---------------------------------------------
路由的嵌套：/user/username
html代码：
<div id="box">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
js代码：
<script>
//准备组件
var Home={
template:'<h3>我是主页</h3>'
};
var User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li>
<router-link to="/user/username">用户名</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
};
var UserDetail={
template:'<p>我是xxx用户</p>'
};
//配置路由
var routes=[
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[ //核心,routes怎么配,children就怎么配
{path:'username',component:UserDetail}
]
},
{path:'*',redirect:'/home'} //重定向,默认打开的是主页
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#box'
});
</script>
上面讲解应用示例：包含路由与动画配合使用(animate.css)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10 .router-link-active{
11 font-size: 20px;
12 color:#f60;
13 }
14 </style>
15 <script src="vue.js"></script>
16 <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
17 <link rel="stylesheet" href="animate.css">
18 </head>
19 <body>
20 <div id="box">
21 <input type="button" value="添加一个路由" @click="push">
22 <input type="button" value="替换一个路由" @click="replace">
23 <div>
24 <router-link to="/home">主页</router-link>
25 <router-link to="/user">用户</router-link>
26 </div>
27 <div>
28 <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
29 <router-view></router-view>
30 </transition>
31 </div>
32 </div>
33
34 <script>
35 //组件
36 var Home={
37 template:'<h3>我是主页</h3>'
38 };
39 var User={
40 template:`
41 <div>
42 <h3>我是用户信息</h3>
43 <ul>
44 <li><router-link to="/user/strive/age/10">Strive</router-link></li>
45 <li><router-link to="/user/blue/age/80">Blue</router-link></li>
46 <li><router-link to="/user/eric/age/70">Eric</router-link></li>
47 </ul>
48 <div>
49 <router-view></router-view>
50 </div>
51 </div>
52 `
53 };
54 var UserDetail={
55 template:'<div>{{$route.params}}</div>'
56 };
57
58 //配置路由
59 const routes=[
60 {path:'/home', component:Home},
61 {
62 path:'/user',
63 component:User,
64 children:[
65 {path:':username/age/:age', component:UserDetail}
66 ]
67 },
68 {path:'*', redirect:'/home'} //404
69 ];
70
71 //生成路由实例
72 const router=new VueRouter({
73 routes
74 });
75
76
77 //最后挂到vue上
78 new Vue({
79 router,
80 methods:{
81 push(){
82 router.push({path:'home'});
83 },
84 replace(){
85 router.replace({path:'user'});
86 }
87 }
88 }).$mount('#box');
89 </script>
90 </body>
91 </html>
脚手架中vue-loader的变化
main.js中
之前vue1.0中
new Vue({
el:'#app',
components:App
});
现在：
new Vue({
el:'#app',
render h => h(APP)
});
