vue06

vueアニメーション

transition     


.fade-transition{}
.fade-enter{}
.fade-leave{}

• vue2.0以后

    
         ( ， 、 ....)
    
    //methods beforeEnter ,beforeEnter(el) 
    class :
    .fade-enter{}   // 
    .fade-enter-active{}  //   ->   ( )
    
    .fade-leave{}
    .fade-leave-active{} //    ->  ( )
    .fade-enter-active,.fade-leave-active{
        transition: 1s all ease;
    }
    @before-enter/enter/@after-enter
    @before-leave/leave/@after-leave
  

• どうやって?css配合用?

    
        //animated P 
                
  
    
  

多个元素运动:

    
        

        

    //k 
    

vue2.0ルーティング

• 布局

• ルーティングの具体的な書き方//コンポーネント

  var Home={

        template:'
 はホームページです。
'
    };
    var News={
        template:'
ニュースです
'
    };
    // 
    const routes=[
        {path:'/home', componet:Home},
        {path:'/news', componet:News},
        {path:'*', redirect:'/home'}
    ];
    // 
    const router=new VueRouter({
        routes
    });
    // vue 
    new Vue({
        router,
        el:'#box'
    });

• リダイレクト

      router.rediect   
   {path:'*', redirect:'/home'}
  

• ルーティングネスト:

    const routes=[
        {path:'/home', component:Home},
        {
            path:'/user',
            component:User,
            children:[  // 
                {path:':username/age/:age', component:UserDetail}
            ]
    //user router-link router-view
        },
        {path:'*', redirect:'/home'}  //404
    ];
  
     :
         
     
     
    var Home={
            template:'
  {{$route.params}}
  '
        //{"username":"sss","age":"11"}
        };
  

• ルーティング例方法:

    router.push({path:'home'});  // , ， 
    router.replace({path:'news'}) // ， , , 
  

vue-cli


プロジェクトvue init webpack-simpleファイル名を作成npm installを初期化
足場:vue-loader

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


vue2.0

vue-loader vue-router 
 Vue.use(VueRouter) 
style-loader    css-loader

style!css// loader