6、vueJs基础知识06

vue动画

　　transition 之前1.0版本是以属性的形式展示的
　　　　<p transition="fade"></p>

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

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

<transition name="fade">

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

</transition>

class定义:

.fade-enter{}    //初始状态（动画开始的状态）

.fade-enter-active{}  //变化成什么样  ->  当元素出来(元素显示时候的状态)

.fade-leave{} （动画开始的状态）

.fade-leave-active{} //变成成什么样   -> 当元素离开(元素消失的时候的状态)

//另外，transition 标签上面还有几个回调事件before-enter,enter,after-enter,leave....

<transition name="fade"
　　@before-enter=""
　　@enter=""
　　@after-enter=""
　　......

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

　　如何animate.css配合用？
　　　　给transition组件直接加上动画类名，此处的animated也可以放到transition的唯一子元素上

　　　　　　<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">

　　　　　　　　<p v-show="show"></p>

　　　　　　</transition>

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

　　　　<transition-group enter-active-class="" leave-active-class="">

　　　　　　<p :key=""></p>

　　　　　　<p :key=""></p>

　　　　</transition-group>

vue2.0 路由

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

　　一、基本使用方法

1.  html布局

    <router-link to="/home">主页</router-link>

    <router-view></router-view>

2. 路由具体写法

    //组件

    var Home={

        template:'<h3>我是主页</h3>'

    };

    var News={

        template:'<h3>我是新闻</h3>'

    };

    //配置路由

    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、父路由中传递参数的路由链接

    　　 <li><router-link to="/user/strive/age/10">Strive</router-link></li>

        <li><router-link to="/user/blue/age/80">Blue</router-link></li>

        <li><router-link to="/user/eric/age/70">Eric</router-link></li>

    在子路由中使用参数

    2、var UserDetail={

            template:'<div>{{$route.params}}</div>'

        };

    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'}) //切换路由，不会往历史记录里面添加

　　五、路由配合动画使用

    <transition enter-active-class="" leave-active-class="">

        <router-view></router>

    <transition>

脚手架

 vue-loader

    1.0  ->

    new Vue({

      el: '#app',

      components:{App}

    })

    2.0->

    new Vue({

      el: '#app',

      render: h => h(App)

    })

　　加载css问题

加载css就需要这两个loader

style-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路由配置

巴特西

6、vueJs基础知识06

最新文章

热门文章