vue06

vue動(dòng)畫(huà)

transition 之前  屬性
<p transition="fade"></p>

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

• vue2.0以后

    <transition name="fade" @before-enter="beforeEnter">
        運(yùn)動(dòng)?xùn)|西(元素，屬性、路由....)
    </transition>
    //methods里邊定義beforeEnter方法,beforeEnter(el)方法里有參數(shù)是當(dāng)前元素
    class定義:
    .fade-enter{}   //初始狀態(tài)
    .fade-enter-active{}  //變化成什么樣  ->  當(dāng)元素出來(lái)(顯示)
    
    .fade-leave{}
    .fade-leave-active{} //變成成什么樣   -> 當(dāng)元素離開(kāi)(消失)
    .fade-enter-active,.fade-leave-active{
        transition: 1s all ease;
    }
    @before-enter/enter/@after-enter
    @before-leave/leave/@after-leave
  

• 如何animate.css配合用？

    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
        //animated也可以放P標(biāo)簽里邊
                <p v-show="show"></p>
    </transition>
  

多個(gè)元素運(yùn)動(dòng):

    <transition-group enter-active-class="" leave-active-class="">
        <p :key="1"></p>
        <p :key="2"></p>
    //k一般循環(huán)出來(lái)
    </transition-group>

vue2.0路由

• 布局

   <router-link to="/home">主頁(yè)</router-link>
   <router-link to="/news">主頁(yè)</router-link>
   <router-view></router-view>
  

• 路由具體寫(xiě)法
  //組件

  var Home={

        template:'<h3>我是主頁(yè)</h3>'
    };
    var News={
        template:'<h3>我是新聞</h3>'
    };
    //配置路由
    const routes=[
        {path:'/home', componet:Home},
        {path:'/news', componet:News},
        {path:'*', redirect:'/home'}
    ];
    //生成路由實(shí)例
    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模版里寫(xiě)上子路由的router-link和router-view
        },
        {path:'*', redirect:'/home'}  //404
    ];
  
    父路由模版中:
        <router-link to="/user/strive/age/10">主頁(yè)</router-link>
    <router-link to="/user/ssss/age/11">主頁(yè)</router-link>
    <router-link to="/user/bbbb/age/12">主頁(yè)</router-link>
    var Home={
            template:'<h3>{{$route.params}}</h3>'
        //{"username":"sss","age":"11"}
        };
  

• 路由實(shí)例方法:

    router.push({path:'home'});  //直接添加一個(gè)路由,表現(xiàn)切換路由，本質(zhì)往歷史記錄里面添加一個(gè)
    router.replace({path:'news'}) //替換路由，不會(huì)往歷史記錄里面添加,相當(dāng)于切換,不會(huì)刷新
  

vue-cli

創(chuàng)建項(xiàng)目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配合
路由要顯示調(diào)用Vue.use(VueRouter)括號(hào)內(nèi)為導(dǎo)入是賦的路由的名
style-loader    css-loader

style!css//從后往前解析的loader