使用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. 06.yield

    Thread.yield()方法的作用:暂停当前正在执行的线程,并执行其他线程.(可能没有效果) yield()让当前正在运行的线程回到可运行状态,以允许具有相同优先级的其他线程获得运行的机会.因此, ...

  2. JS的加载和执行

    从JS的加载和执行谈性能优化 ---高性能JS读后感(第一章) 从脚本的"霸道"说起,随着浏览器的进步,js越来越听话了,所以,我们先说说以前的浏览器是怎么加载js的,以及js如何 ...

  3. 【leetcode】941. Valid Mountain Array

    题目如下: Given an array A of integers, return true if and only if it is a valid mountain array. Recall ...

  4. POJ 2387 Til the Cows Come Home （dijkstra模板题）

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  5. Linux 应用程序编程基础

    一个计算机应用程序在内存中可以分成两个部分:存放代码的代码段和存放数据的数据段.代码段存放用户编写的代码;数据段存放栈和堆. 相关内存管理函数 #include <stdlib.h> vo ...

  6. [NOIP模拟25]题解

    A.字符串 Catalan数不能再裸了 #include<cstdio> #include<iostream> #include<cstring> using na ...

  7. Vue.config.optionMergeStrategies 用法分析

    举个例子,假设有个对象,他叫objA, 技能是说hello,他喜欢的女生叫小花,但是他是一个花心的人! objA = { name: 'objA ', sayHello_ () { console.l ...

  8. ARM系列处理器的分类

    1.ARM ARM即以英国ARM(Advanced RISC Machines)公司的内核芯片作为CPU,同时附加其他外围功能的嵌入式开发板,用以评估内核芯片的功能和研发各科技类企业的产品. ARM ...

  9. hive内部表&外部表介绍

    未被external修饰的是内部表(managed table),被external修饰的为外部表(external table):区别:内部表数据由Hive自身管理,外部表数据由HDFS管理:内部表 ...

  10. STM32例程之USB HID双向数据传输（源码下载）【转】

    程序功能 将STM32的USB枚举为HID设备. STM32使用3个端点,端点0用于枚举用,端点1和2用于数据的发送和接收. 端点长度为64,也就是单次最多可以传输64个字节数据. STM32获取上位 ...