Vue2.0的变化———vue2.0动画的变化vue-2.0路由的变化

Posted 夏至未至

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2.0的变化———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)
  });

以上是关于Vue2.0的变化———vue2.0动画的变化vue-2.0路由的变化的主要内容,如果未能解决你的问题,请参考以下文章

transition vue2.0动画

vue2.0有哪些变化

vue2.0的变化

vue25---vue2.0变化

vue2.0 监听全局参数的变化

VUE2.0不可忽视的很多变化