vue动画

　　transition 之前1.0版本是以 属性的形式展示的

　　　　<p transition="fade"></p>

　　　　.fade-transition{}

　　　　.fade-enter{}

　　　　.fade-leave{}

　　到2.0以后transition是以组件的形式使用的，并且携带一个name属性用于css动画选择

     
          运动东西(元素，组件、路由....)
     class定义:.fade-enter{}    //初始状态（动画开始的状态）.fade-enter-active{}  //变化成什么样  ->  当元素出来(元素显示时候的状态).fade-leave{} （动画开始的状态）.fade-leave-active{} //变成成什么样   -> 当元素离开(元素消失的时候的状态) //另外，transition 标签上面还有几个回调事件before-enter,enter,after-enter,leave....

> 　　运动东西(元素，组件、路由....)  

　　如何animate.css配合用？

　　　　给transition组件直接加上动画类名，此处的animated也可以放到transition的唯一子元素上

　　多个元素运动使用transition-group:每个元素必须给一个唯一的key

　　　　

vue2.0 路由

　　官网http://router.vuejs.org/zh-cn/index.html

　　一、基本使用方法

1.  html布局    
     
      主页
         
     2. 路由具体写法    //组件    var Home={        template:'
我是主页
'    };    var News={        template:'
我是新闻
'    };    //配置路由    const routes=[        {path:'/home', componet:Home},        {path:'/news', componet:News}    ];    //生成路由实例    const router=new VueRouter({        routes    });    //最后挂到vue上    new Vue({        router,        el:'#box'    });3. 重定向    之前1.0中  router.rediect  废弃了 　　2.0中使用配置项

　　　　{path:'*', redirect:'/home'}配置的路由routes数组里面的一项

　　　　const routes=[ 　　　　　　{path:'/home', componet:Home}, 　　　　　　{path:'/news', componet:News}, 　　　　　　{path:'*', redirect:'/home'} 　　　　];

　　二、路由嵌套

路由嵌套:    /user/username    const routes=[        {path:'/home', component:Home},        {            path:'/user',            component:User,            children:[      //核心                {path:'username', component:UserDetail}            ]        },        {path:'*', redirect:'/home'}  //类似404，找不到就到这个路由    ];

　　三、路由参数　

　　　　路由：/user/strive/age/10传参数

　　　　　　:id

　　　　　　:username

　　　　　　:age

　　

　　 1、父路由中传递参数的路由链接    　　 
      
       Strive
      
        
      
       Blue
      
        
      
       Eric
      
        在子路由中使用参数    2、var UserDetail={            template:'
     
      {
   {$route.params}}
     
'        };        3、配置路由格式    const routes=[         {path:'/home', component:Home},         {             path:'/user',             component:User,             children:[                {path:':username/age/:age', component:UserDetail}             ]         },         {path:'*', redirect:'/home'}  //类似404，找不到就到这个路由

];

　　四、路由实例方法

路由实例方法:    router 实例    router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个，用的是history的pushState    router.replace({path:'news'}) //切换路由，不会往历史记录里面添加

　　五、路由配合动画使用

脚手架

vue-loader    1.0  ->     new Vue({      el: '#app',      components:{App}    })        2.0->    new Vue({      el: '#app',      render: h => h(App)    })

　　加载css问题

加载css就需要这两个loaderstyle-loader    css-loader    style!css配置css加载器的时候webpack.config.js中    {        test:/\.css$/,        loader:'style!css'  //style和css的顺序很重要    }

2.0中vue-loader和vue-router配合

　　加载vue-router，抽离router.config.js路由配置