Vue动画 和 Vue路由
一.transition:
Vue1.0:
<p transition="fade"></p>
.fade.transition{}
.fade-enter{}
.fade-leave{}
(一).Vue2.0以后,transition组件
<transition name="fade">
运动的内容(元素,属性,路由...)
<p v-show="show"></p>
</transition>
class定义:
.fade-enter{}:初始状态
.fade-enter-active{}:变化成什么样子 ->当元素出来(显示)
.fade-leave{}:
.fade-leave-active{}:变化成什么样子 ->当元素离开(消失)
(二).如何animate配合使用?
<link rel="stylesheet" href="animate.css">
<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition>
对多个元素:transition-group + :key
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
二、Vue2.0路由
`Vue2.0-router基本使用:
(一)、
<div id="box"> **//1.布局**
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script> **//2.路由的具体写法**
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
// 配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:"*",redirect:'/home'} // 重定向,之前的router.rediect丢弃了
];
//生成路由
const router=new VueRouter({
routes
});
//挂到Vue上
new Vue({
router,
}.$mount('#box'));
(二)、路由嵌套
/user/
const routes=[
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username',component:UserDetail}
]
},
{path:"*",redirect:'/home'}
];
(三)、$route.params
(四)、路由实例方法:
route.push({path:'路径'}); //直接添加一个路由,表现是切换路由,本质是往历史纪录添加一个记录
route.replace({path:"路径"}); //替换一个路由
三、脚手架:vue-loader
Vue1.0 ->
new Vue({
el: '#app',
components:{App}
})
Vue2.0 ->
new Vue({
el: '#app',
render: h => h(App)
})
Vue2.0loader 和vue-router