vue动画
一、vue动画
1、使用transition定义动画
//定义过渡的样式
/*动画刚开始时的状态，动画结束时的状态*/
.move-enter-active,.move-leave-active{
transition:all 2s;
}
/*动画过渡的css样式*/
.move-enter,.move-leave-to{
opacity:0;
transform:translateX(150px);
}
//使用vue中的transition动画组件
<transition name="move">
<h2 v-if="show" class="title">Hello world...</h2>
</transition>
//创建vue的实例
new Vue({
el: ".box",
data: {
show: true
},
methods: {
toggle() {
this.show = !this.show
}
}
})
2、结合animate.css动画库定义transition动画
-
使用transition组件，并且定义动画进入（enter-active）时的类名和动画离开（leave-active）时的类名
<div class="box"> <transition name="myblock" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft"> <div v-if="show" class="block"></div> </transition> <button @click="toggle">切换</button> </div> -
创建vue实例改变元素的显示与隐藏从而触发动画效果
new Vue({ el: ".box", data: { show: true }, methods: { toggle() { this.show = !this.show } } })
3、监听vue动画的过渡事件
-
使用transition定义动画
<div class="box"> <transition name="myblock" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft" @before-enter="beforeEnter" <!--动画进入前--> @enter="enter" <!--动画开始进入--> @after-enter="afterEnter" <!--动画进入后--> @before-leave="beforeLeave" <!--动画离开前--> @leave="leave" <!--动画进开始离开--> @after-leave="afterLeave"> <!--动画离开后--> <div v-if="show" class="block"></div> <!--动画进入前--> </transition> <button @click="toggle">切换</button> </div> -
创建vue实例
new Vue({ el: ".box", data: { show: true }, methods: { toggle() { this.show = !this.show }, beforeEnter() { alert("开始动画之前.....") }, enter() { alert("动画开始......") }, afterEnter() { alert("动画结束......") }, beforeLeave(){ alert("离开之前") }, leave(){ alert("即将要离开....") }, afterLeave(){ alert("离开已经结束") } } })
二、vue-router
1、为什么要使用vue-router?
-
实现SPA(single page application 减少客户端和服务器之间请求加载时间)
<body> <div class="box"> <h1>vue-router使用</h1> <!-- 创建单页应用的导航 --> <nav> <!-- vue-router的导航链接 --> <router-link to="/">主页</router-link> <router-link to="/hot">热门话题</router-link> <router-link to="/tech">科技动态</router-link> <router-link to="/dev">开发者资讯</router-link> </nav> <!-- 页面中需要根据导航切换的内容的容器 --> <router-view></router-view> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> // 定义不同的路由切换时需要显示的内容 // var Hot={template:"<h1>这是热门话题部分</h1>"} // var Tech={template:"<h1>这是科技动态部分</h1>"} // var Dev={template:"<h1>这是开发者资讯部分</h1>"} var Index=Vue.component("Index",{ template:"<h1>这是主页部分</h1>" }) var Hot=Vue.component("Hot",{ template:"<h1>这是热门话题部分</h1>" }) var Tech=Vue.component("Tech",{ template:"<h1>这是科技动态部分</h1>" }) var Dev=Vue.component("Dev",{ template:"<h1>这是开发者资讯部分</h1>" }) //配置路由规则 var routes=[{ path:"/", component:Index },{ path:"/hot", component:Hot },{ path:"/tech", component:Tech },{ path:"/dev", component:Dev }] //创建vue-router的实例 var router = new VueRouter({ routes:routes }) //最后将vue-router的实例挂载到vue的实例 new Vue({ el:".box", router:router }) </script> </body>
2、如何使用vue-router
-
公用style样式
<style> *{ margin:0; padding:0; } body{ font-size:15px; } nav{ width: 100%; height: 45px; font-size:0; } nav>a{ display:inline-block; height: 45px; width:25%; line-height:45px; box-sizing:border-box; text-align:center; font-size:18px; } .content{ border:1px solid skyblue ; text-align:center; min-height:400px; } </style>
01、vue-router路由传参
-
html结构
<div class="container"> <h1 class="text-center text-muted">vue-router使用</h1> <!-- 创建单页应用的导航 --> <nav> <!-- vue-router的导航链接 --> <router-link to="/AI">热门话题</router-link> <router-link to="/tech">科技动态</router-link> <router-link to="/dev/js/3">开发者资讯</router-link> <router-link to="/user?name=张三&age=22">用户中心</router-link> </nav> <!-- 页面中需要根据导航切换的内容的容器 --> <div class="content"> <router-view></router-view> </div> </div> -
script结构
<script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> // 1、定义不同的路由切换时需要显示的内容 var Hot=Vue.component("Hot",{ template:"<h1>这是热门话题部分,{{$route.params.type}}</h1>", created:function(){ alert("话题类型:"+this.$route.params.type) } }) var Tech=Vue.component("Tech",{ template:"<h1>这是科技动态部分</h1>" }) var Dev=Vue.component("Dev",{ template:"<h1>这是开发者资讯部分,获取文章的类型:{{$route.params.type}},获取文章的页码:{{$route.params.page}}</h1>" }) var User=Vue.component("User",{ template:"<div><h1>这是用户中心,{{$route.query.name}},{{$route.query.age}}</h1></div>" }) //2、配置路由规则 var routes=[{ path:"/:type", component:Hot },{ path:"/tech", component:Tech },{ path:"/dev/:type/:page", component:Dev },{ path:"/user", component:User }] //3、创建vue-router的实例 var router = new VueRouter({ routes:routes }) //4、最后将vue-router的实例挂载到vue的实例 new Vue({ el:".container", router }) </script>
02、vue-router路由嵌套
-
html结构
<div class="container"> <h1 class="text-center text-muted">vue-router使用</h1> <!-- 创建单页应用的导航 --> <nav> <!-- vue-router的导航链接 --> <router-link to="/">热门话题</router-link> <router-link to="/tech">科技动态</router-link> <router-link to="/dev">开发者资讯</router-link> <router-link to="/user">用户中心</router-link> </nav> <!-- 页面中需要根据导航切换的内容的容器 --> <div class="content"> <router-view></router-view> </div> </div> <template id="user"> <div> <h1>这是用户中心</h1> <p> <router-link class="btn btn-primary" to="/user/login">登录</router-link> <router-link class="btn btn-success" to="/user/reg">注册</router-link> </p> </div> </template> -
script结构
<script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> // 1、定义不同的路由切换时需要显示的内容 var Hot=Vue.component("Hot",{ template:"<h1>这是热门话题部分</h1>", }) var Tech=Vue.component("Tech",{ template:"<h1>这是科技动态部分</h1>" }) var Dev=Vue.component("Dev",{ template:"<h1>这是开发者资讯部分</h1>" }) var User=Vue.component("User",{ template:"#user" }) //定义登录组件 var Login=Vue.component("Login",{ template:"<h1 class='text-center'>这是登录组件</h1>" }) var Reg=Vue.component("Reg",{ template:"<h1 class='text-center'>这是登录组件</h1>" }) var NotFound=Vue.component("Error",{ template:"<h1 class='text-center'>404 Page Not Found!</h1>" }) //2、配置路由规则 var routes=[{ path:"/", component:Hot },{ path:"/tech", component:Tech },{ path:"/dev", component:Dev },{ path:"/user", component:User, //配置子路由的路由规则 children:[{ path:"", component:Login },{ path:"reg", component:Reg }] },{ path:"*", component:Error }] //3、创建vue-router的实例 var router = new VueRouter({ routes:routes }) //4、最后将vue-router的实例挂载到vue的实例 new Vue({ el:".container", router }) </script>
03、vue-router路由跳转的监听
-
html结构
<div class="container"> <h1 class="text-center text-muted">vue-router使用</h1> <!-- 创建单页应用的导航 --> <nav> <!-- vue-router的导航链接 --> <router-link to="/">热门话题</router-link> <router-link to="/tech">科技动态</router-link> <router-link to="/dev">开发者资讯</router-link> <router-link to="/user?name=Alice">用户中心</router-link> </nav> <!-- 页面中需要根据导航切换的内容的容器 --> <div class="content"> <router-view></router-view> </div> </div> <template id="user"> <div> <h1>这是用户中心</h1> <p> <router-link class="btn btn-primary" to="/user/">登录</router-link> <router-link class="btn btn-success" to="/user/reg">注册</router-link> </p> <router-view></router-view> </div> </template> -
script结构
<script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> // 1、定义不同的路由切换时需要显示的内容 var Hot=Vue.component("Hot",{ template:"<h1>这是热门话题部分</h1>", }) var Tech=Vue.component("Tech",{ template:"<h1>这是科技动态部分</h1>" }) var Dev=Vue.component("Dev",{ template:"<h1>这是开发者资讯部分</h1>" }) var User=Vue.component("User",{ template:"#user" }) //定义登录组件 var Login=Vue.component("Login",{ template:"<h1 class='text-center'>这是登录组件</h1>" }) var Reg=Vue.component("Reg",{ template:"<h1 class='text-center'>这是登录组件</h1>" }) var Error=Vue.component("Error",{ template:"<h1 class='text-center'>404 Page Not Found!</h1>" }) //2、配置路由规则 var routes=[{ //name代表组件的名称 name:"主页", path:"/", component:Hot },{ name:"科技动态", path:"/tech", component:Tech },{ name:"开发者资讯", path:"/dev", component:Dev },{ path:"/user", component:User, //配置子路由的路由规则 children:[{ name:"登录", path:"", component:Login },{ name:"注册", path:"reg", component:Reg }] },{ path:"*", component:Error }] //3、创建vue-router的实例 var router = new VueRouter({ routes:routes }) //4、最后将vue-router的实例挂载到vue的实例 new Vue({ el:".container", router:router, watch:{ "$route":function(target,current){ //target代表路由即将要跳转到的目标路径 //current代表当前路由路径 console.log("路由即将要跳转至-->",target) console.log("当前路由路径是-->",target) } } }) </script>
