Vue教程(组件-切换案例)
2019-07-26 19:48
1386 查看
前面介绍了Vue中组件的创建方式和data及methods属性,本文我们来做一个Vue组件的切换案例,效果如下:
这个效果相信大家都能搞定,本文希望通过这个案例来加深下组件的使用,
Vue 组件切换案例
基础页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { } }) </script> </body> </html>
一、通过v-if控制实现
首先我们通过前面介绍的v-if标签来实现下这种效果
1.创建组件
创建我们需要的两个全局组件,并通过标签使用。
<div id="app"> <login></login> <register ></register> < 7ff7 span class="token tag"></div> <script> // 创建登录的组件 Vue.component("login",{ template: "<h3>这是一个登录LOGIN组件</h3>" }) // 创建注册的组件 Vue.component("register",{ template: "<h3>这是一个注册组件</h3>" }) var vm = new Vue({ el: "#app", data: { }, methods: { } }) </script>
2.控制显示
添加链接标签,通过 v-if 和 v-else 标签来控制显示和隐藏,如下
效果
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <script> // 创建登录的组件 Vue.component("login",{ template: "<h3>这是一个登录LOGIN组件</h3>" }) // 创建注册的组件 Vue.component("register",{ template: "<h3>这是一个注册组件</h3>" }) var vm = new Vue({ el: "#app", data: { flag: true }, methods: { } }) </script> </body> </html>
二、通过component标签来实现
除了上面介绍的这种方式以外我们还可以通过Vue组件中给我们提供的一个component标签来实现
Vue提供了 component 来展示对应名称的组件,component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称
效果
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a> <component :is="comName"></component> </div> <script> // 创建登录的组件 Vue.component("login",{ template: "<h3>这是一个登录LOGIN组件</h3>" }) // 创建注册的组件 Vue.component("register",{ template: "<h3>这是一个注册组件</h3>" }) var vm = new Vue({ el: "#app", data: { comName: "login" }, methods: { } }) </script> </body> </html>
组件切换-动画
前面我们介绍了 动画 的使用,那么刚好我们可以在切换的时候把动画效果给加上。
添加动画样式:
<style> .v-enter, .v-leave-to{ opacity: 0; transform: translateX(150px) ; } .v-enter-active, .v-leave-active{ transition: all 1s ease; } </style>
组件包裹 标签
效果
我们发现动画切换的时候两个是一块执行的,这时我们可以在 transition 标签添加一个 mode属性 来设置动画的模式
效果如下:
搞定~
相关文章推荐
- vue笔记之组件切换
- vue学习笔记:6.4.组件案例-评论列表
- 解析vue路由异步组件和懒加载案例
- vue组件间的通信案例
- vue组件切换时使用过渡(transition)时应该注意的一些事项
- vue富文本编辑器组件vue-quill-edit使用教程
- vue项目实践教程3:中间大的五选项底部切换卡制作及相关问题解决
- 自定义Vue组件打包、发布到npm及使用教程
- Vue框架中利用is特性切换组件
- vue-router组件重用 路由切换时的问题
- vue组件简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- vue2.0实战案例之高级教程-老孟编程
- Vue.js递归组件实现组织架构树和选人功能案例分析
- Vue.js 系列教程 2:组件,Props,Slots
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 2018最全Vue.Js从基础到实战案例高级课程大合集12套教程 价值上千元 [
- Vue一个案例引发的动态组件与全局事件绑定总结