使用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. python核心编程socket备忘

    服务器端: # Echo server program from socket import * from time import ctime HOST = '' # Symbolic name me ...

  2. Jenkins的安装、部署、启动(完整教程)

    测试环境 Linux系统 Centos 7 安装步骤: 1.安装jdk 我安装的是jdk8,此处就不多说了,自己百度哈,很简单 2.安装jenkins 首先依次执行如下三个命令: 2.1.导入镜像: ...

  3. Vue - 前端本地项目开发过程中webpack打包内存泄漏问题解决方法

    编译项目出现如下错误: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 原因: n ...

  4. LUOGU P2617 Dynamic Rankings(树状数组套主席树)

    传送门 解题思路 动态区间第\(k\)大,树状数组套主席树模板.树状数组的每个位置的意思的是每棵主席树的根,维护的是一个前缀和.然后询问的时候\(log\)个点一起做前缀和,一起移动.时空复杂度\(O ...

  5. java并发编程笔记（一）——并发编程简介

    java并发编程笔记(一)--简介 线程不安全的类示例 public class CountExample1 { // 请求总数 public static int clientTotal = 500 ...

  6. 91、R语言编程基础

    1.查看当前工作空间 > getwd() ] "C:/Users/P0079482.HHDOMAIN/Documents" > 2.查看内存中有哪些对象 > ls ...

  7. ADO方式，VC调用Execute执行INSERT INTO插入变量SQL语句的写法

    ADO方式,VC调用Execute执行INSERT INTO插入变量SQL语句的写法 有些情况下,SQL SERVER 2008r2中需要保存float,int类型的数据,当C 中的变量为double ...

  8. ms13_055 metasploit

    111 def get_payload(t) 112 if t['Rop'] == :msvcrt 113 print_status("Using msvcrt ROP") 114 ...

  9. Django框架（二十六）—— Django rest_framework-分页器与版本控制

    目录 分页器与版本控制 一.三种分页器 二.分页器 1.普通分页(PageNumberPagination) 2.偏移分页(LimitOffsetPagination) 3.加密分页(CursorPa ...

  10. 20140914 1到N自然数排序

    1.关于一道1到N自然数排序的华为面试题 http://blog.csdn.net/hongyuan19/article/details/1887656 为什么想进入华为 你对华为了解多少? 华为给我 ...