Vue.js的学习1.7

Vue.js的学习1.7

1.vue动画

运动东西(元素，属性、路由….)

class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)

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

 .fade-enter-active, .fade-leave-active{
            transition: 1s all ease;   //设置时间1秒
        }
        .fade-enter-active{
            opacity:1;
            width:300px;
            height:300px;
        }
        .fade-leave-active{
            opacity:0;
            width:100px;
            height:100px;
        }
        .fade-enter,.fade-leave{
            opacity:0;
            width:100px;
            height:100px;
        }

2.vue2.0 路由:
路由具体写法

    //组件
    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'
    });

重定向

    之前  router.rediect  废弃了
    {path:'*', redirect:'/home'}

路由嵌套:

/user/username

const routes=[
    {path:'/home', component:Home},
    {
        path:'/user',
        component:User,
        children:[  //核心
            {path:'username', component:UserDetail}
        ]
    },
    {path:'*', redirect:'/home'}  
];

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