使用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. Qt 显示网页的控件

    Qt5.6以下的版本,基于QtWebkit控件Qt5.6以上的MSVC版本,基于 Chromium 的浏览器引擎 Qt WebEngineQt5.6以上的mingw 版本,只能采用QAxWidget ...

  2. php 安装zip模块

    为php安装zip扩展 wget http://pecl.php.net/get/zip-1.13.5.tgz tar -zvxf zip-1.13.5.tgz cd zip-1.13.5 /home ...

  3. 解决PageHelper.startPage(page, size)后，关于PageInfo的total等属性不正确等问题

    在解决PageHelper.startPage(page, size);的位置问题后,又遇到total等信息错误,主要还是不细心,两个不同的List实例化进PageInfo,不能混在一起,同时要确保这 ...

  4. Mybatis基于XML配置SQL映射器(一)

    Durid和Mybatis开发环境搭建 SpringBoot搭建基于Spring+SpringMvc+Mybatis的REST服务(http://www.cnblogs.com/nbfujx/p/76 ...

  5. 【LeetCode 33】搜索旋转排序数组

    题目链接 [题解] 会发现旋转之后,假设旋转点是i 则0..i-1是递增有序的.然后i..len-1也是递增有序的. 且nums[i..len-1]<nums[0]. 而nums[1..i-1] ...

  6. ubuntu下安装apidoc

    1.到http://nodejs.cn/download/下载nodejs 可以复制链接 使用wget下载更加快速 选择对应的操作系统位数 下载到/usr/local/src 此处强烈不建议编译安装 ...

  7. Android开发时包名、签名、渠道和版本号的易坑点（转）

    本文中总结一下 Android 开发中容易被忽视的一些注意事项吧: 一.谨慎选择包名 包名 (Package Name) 就相当于一款应用在户口本上登记的名字,是系统用来区分不同应用的字段.重复的包名 ...

  8. 简单使用Laravel-admin构建一个功能强大的后台管理

    Laravel-admin可以快速构建一个功能强大的后台,方便快速开发. 以下内容记录简单使用Laravel-admin,以及遇到小错误的解决方法. Laravel-admin 依赖以下环境 需要提前 ...

  9. 78、tensorflow滑动平均模型，用来更新迭代的衰减系数

    ''' Created on 2017年4月21日 @author: weizhen ''' #4.滑动平均模型 import tensorflow as tf #定义一个变量用于计算滑动平均,这个变 ...

  10. Python单元测试示例

    这是使用单元测试框架unittest进行的单元测试,并输出测试结果. 首先定义一个类,三个方法.第一个方法是判断两个字符串是否相等,第二个方法是判断结果为真:第三个方法也是判断两个字符串相等. 然后是 ...