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