使用flag标识符结合v-if和v-else切换组件

  1. 页面结构：（缺点：只适用于两个组件间切换，不适合多个）

 <div id="app">
     <input type="button" value="toggle" @click="flag=!flag">
     <my-com1 v-if="flag"></my-com1>
     <my-com2 v-else="flag"></my-com2>
   </div>

  1. Vue实例定义：

 <script>
     Vue.component('myCom1', {
       template: '<h3>奔波霸</h3>'
     })
 ​
     Vue.component('myCom2', {
       template: '<h3>霸波奔</h3>'
     })
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         flag: true
       },
       methods: {}
     });
   </script>

使用:is属性来切换不同的子组件,并添加切换动画

  1. 组件实例定义方式：

   // 登录组件
     const login = Vue.extend({
       template: `<div>
         <h3>登录组件</h3>
       </div>`
     });
     Vue.component('login', login);
 ​
     // 注册组件
     const register = Vue.extend({
       template: `<div>
         <h3>注册组件</h3>
       </div>`
     });
     Vue.component('register', register);
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: { comName: 'login' },
       methods: {}
     });

  1. 使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

   <div id="app">
     <a href="#" @click.prevent="comName='login'">登录</a>
     <a href="#" @click.prevent="comName='register'">注册</a>
     <hr>
     <transition mode="out-in">
       <component :is="comName"></component>
     </transition>
   </div>
 ​

  1. 添加切换样式：

   <style>
     .v-enter,
     .v-leave-to {
       opacity: 0;
       transform: translateX(30px);
     }
 ​
     .v-enter-active,
     .v-leave-active {
       position: absolute;
       transition: all 0.3s ease;
     }
 ​
     h3{
       margin: 0;
     }
   </style>

组件切换动画

1.把组件用transition标签包起来，定义mode

2.定义动画的样式

 <!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>
   <style>
     .v-enter,
     .v-leave-to {
       opacity: 0;
       transform: translateX(150px);
     }
 ​
     .v-enter-active,
     .v-leave-active {
       transition: all 0.5s ease;
     }
   </style>
 </head>
 ​
 <body>
   <div id="app">
     <a href="" @click.prevent="comName='login'">登录</a>
     <a href="" @click.prevent="comName='register'">注册</a>
 ​
     <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
      <!-- 如果不使用mode 属性,一个组件还没完全走出去，切换的新组件就进来了，这样就乱套了 -->
     <transition mode="out-in">
       <component :is="comName"></component>
     </transition>
 ​
   </div>
 ​
   <script>
     // 组件名称是 字符串
     Vue.component('login', {
       template: '<h3>登录组件</h3>'
     })
 ​
     Vue.component('register', {
       template: '<h3>注册组件</h3>'
     })
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
       },
       methods: {}
     });
   </script>
 </body>
 ​
 </html>
 ​

Vue学习笔记【24】——Vue组件（组件切换）的更多相关文章

  1. vue学习笔记（1）—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  2. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  3. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  4. vue学习笔记：vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  5. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  6. Vue学习笔记（三）组件间如何通信传递参数

    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...

  7. vue学习笔记（五）— 组件通信

    关于vue父子组件通信 作者:狐狸家的鱼 本文链接:vue组件通信 GitHub:sueRimn 如果组件是一个单页面,组件之间存在父子关系,数据传递就需要根据父子不同的地位使用不同的办法. 借助新建 ...

  8. vue学习笔记（一）--Tab切换

    最近在学Vue,写的第一个demo是Tab,刚开始还直接把js代码贴过来改,没觉得有什么不同.然后请教别人说,用Vue最好不要操作dom啦,又把代码做了修改-_-. html代码如下: <div ...

  9. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  10. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

随机推荐

  1. maven打包出现 Error assembling JAR: java.lang.reflect.InvocationTargetException

    如果项目的包名使用中文,会反射找不到,idea设置Editor->File Encodings 改utf-8试试

  2. bean的初始化和销毁方法

    1.bean的生命周期: bean创建---初始化----销毁的过程 容器管理bean的生命周期: 我们可以自定义初始化和销毁方法:容器在bean进行到当前生命周期的时候来调用我们自定义的初始化和销毁 ...

  3. SparkStreaming获取kafka数据的两种方式：Receiver与Direct

    简介: Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以简单理解成: Receiver方式是通过zookeeper来连接kafka队列, Dire ...

  4. Mybatis基于接口注解配置SQL映射器(二)

    Mybatis之增强型注解 MyBatis提供了简单的Java注解,使得我们可以不配置XML格式的Mapper文件,也能方便的编写简单的数据库操作代码.但是注解对动态SQL的支持一直差强人意,即使My ...

  5. jdbc 数据库批处理insert操作

    package blob; import java.sql.Connection; import java.sql.PreparedStatement; import jdbc.utils.*; // ...

  6. Delphi直接读取XmL

    有时,只需要用XML作一些小的应用,比如只是简单地保存日志或者一些配置,这时我们只需要直接读写XML就好,效率第一. Delphi盒子有一个直接读写XML文件 (例子和代码),其核心函数为下面两个函数 ...

  7. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  8. restTemplate源码详解深入剖析底层实现思路

    一 准备工作 1 启动一个项目,发布一个restful的get请求,端口设置为8090. @RestController @RequestMapping("/youku1327") ...

  9. CTF隐写——越光宝盒

    0x题目 原题来自于实验吧:http://www.shiyanbar.com/ctf/1992 一句话,和一个PNG图片. 0x解题 1.下载图片以后,发现打不开. 首先想到的就是文件头可能被修改了, ...

  10. MyEclipse增强代码补全

    MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大. 方法 1 打开MyEclipse 6.0.1,然后“window”→“Prefere ...