6、vueJs基础知识06

淡淡的烟草味﹌ 2021-11-11 03:28 293阅读 0赞

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

五、路由配合动画使用

**脚手架**

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

转载于:https://www.cnblogs.com/gopark/p/11046228.html