<!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>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></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 属性，设置组件切换时候的模式 -->

      <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>

第六章 组件 60 组件切换-应用切换动画和mode方式的更多相关文章

  1. 第六章、forms组件

    目录 第六章.forms组件 一.注册功能手写 二.forms组件完整写法 基本使用 三.forms组件前端渲染标签组件 三.forms组件其他知识点 在python console测试 校验数据 f ...

  2. 第六章：四大组件之Activity

    tivityActivity作为Android四大组件之一,也是其中最重要的一个组件.作为一个与用户交互的组件,我们可以把Activity比较成为windows系统上的一个文件夹窗口,是一个与用户交互 ...

  3. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  4. ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性

    原文:ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性 深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开 ...

  5. 第六章、ajax方法以及序列化组件

    目录 第六章.ajax方法 一.choice参数介绍 二.MTV与MVC模型 三.ajax方法 四.案例 五.Ajax传json格式的数据 六. AJAX传文件 代码如下 ajax传文件需要注意的事项 ...

  6. KnockoutJS 3.X API 第六章 组件(2) 组件注册

    要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...

  7. 第九章：四大组件之Broadcast Receiver

    第九章:四大组件之Broadcast Receiver   一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...

  8. Java核心技术卷一基础知识-第9章-Swing用户界面组件-读书笔记

    第9章 Swing用户界面组件 本章内容: * Swing与模型-视图-控制器设计模式 * 布局管理概述 * 文本输入 * 选择组件 * 菜单 * 复杂的布局管理 * 对话框 本章将介绍构造功能更加齐 ...

  9. vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

随机推荐

  1. prometheus+grafana监控Linux和kubernetes的例子

    1.安装和配置prometheus tar zxvf prometheus-.linux-amd64.tar.gz -C /usr/local/ ln -sv /usr/local/prometheu ...

  2. Git提交本地项目文件到GitHub的详细操作

    因最近在使用git命令提交代码到github的操作,网上找了下教程,记录下过程,便于查看 添加整个文件夹及内容 git add 文件夹/ 添加目录中所有某种类型的文件 git add *.文件类型 `

  3. 消息中间件RabbitMq的代码使用案例

    消费者: ---------------------- 构造初始化: public RabbitMqReceiver(String host, int port, String username, S ...

  4. C语言Ⅰ博客作业07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/9933 我在这个课程的目 ...

  5. Python全栈开发之6、面向对象

    一.创建类和对象 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例 ...

  6. Redis（1.10）Redis主从复制下的哨兵模式

    [0]哨兵 sentinel 的作用 其概念参考:Redis高可用(理论篇) 中的[2] [0.1]监控:监控主从是否正常 [0.2]通知:出现问题时,可以通知相关人员 [0.3]故障转移:自动主从切 ...

  7. spring-boot 使用jdk6（三）

    环境 jdk 6 tomcat 7.0.59 sts 4.4.2 maven 3.2.5 背景 由于环境限制,还在使用 JDK6,所以需要将 spring boot 进行配置,支持JDK6. 以下所有 ...

  8. python的异常处理机制

    异常机制己经成为衡量一门编程语言是否成熟的标准之一,使用异常处理机制的 Python 程序有更好的容错性,更加健壮. 对于计算机程序而言,情况就更复杂了一一没有人能保证自己写的程序永远不会出辛苦!就算 ...

  9. 打印从1到最大的n位数(考虑大数问题)

    void Print1ToMaxOfNDigits(int n) { if(n <= 0) { return; } int * number = new int[n]; for(int i = ...

  10. [Scala] java使用scala的jar包问题:Exception in thread "main" java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.Short

    场景 刚写的scala处理bmp文件的实验, 打了jar包让java调用一下, 结果发生这个错误. package org.tanglizi.bmp.demo; import org.tanglizi ...