之前講解的都是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)
});