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