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

   </head>

   <body>

       <div id="app">

       <a href="" @click.prevent="comName='login'">登录</a>

       <a href="" @click.prevent="comName='register'">注册</a>

       <!-- Vue提供了 component ，来展示对应名称的组件 -->

       <!-- component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称 -->

       <component :is="comName"></component>

       <!-- 总结：当前学习了几个Vue提供的标签了？？？ -->

       <!-- component,template,transition,transitionGroup -->

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

第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换的更多相关文章

  1. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  2. vue学习-day03（动画，组件）

    目录: 1.品牌列表-从数据库获取列表    2.品牌列表-完成添加功能    3.品牌列表-完成删除功能    4.品牌列表-全局配置数据接口的根域名    5.品牌列表-全局配置emulateJS ...

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

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

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

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

  5. 第六章、forms组件

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

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

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

  7. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

  8. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...

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

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

随机推荐

  1. 【计算机视觉】极限优化：Haar特征的另一种的快速计算方法—boxfilter

    这种以Boxfilter替代integral image 的方法很难使用到haar.LBP等特征检测中,因为像下面说的,它不支持多尺度,也就是说所提取的特征必须是同一个大小,最起码同一个宽高比的,这一 ...

  2. 今盒子里有n个小球，A、B两人轮流从盒中取球，每个人都可以看到另一个人取了多少个

    /* 题目描述 今盒子里有n个小球,A.B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个,也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出的球 ...

  3. SpringBoot消息队列之-rabbitMQ

    一.概述 1.在大多应用中,我们系统之间需要进行异步通信,即异步消息. 2.异步消息中两个重要概念:消息代理(message broker)和目的地(destination) 当消息发送者发送消息以后 ...

  4. MySql 枚举和集合 详解

    枚举与集合 枚举类型,enum 每个枚举值均有一个索引值: 在列说明中列表值所允许的成员值被从 1 开始编号. 一般来说就是单选,在定义枚举的时候列出所有的可能性: 代码如下 1. create ta ...

  5. 201709-3 JSON查询

    问题描述 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,可以用来描述半结构化的数据.JSON 格式中的基本单元是值 (value),出于简化的目的本题 ...

  6. pt工具

    percona-toolkit简介percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql任务和系统任务,这些任务包括: 检查master和slav ...

  7. Hello World！！！

    C #include <stdio.h> int main() #main 入口函数 { printf("Hello,World!"); #printf 函数打印 ; ...

  8. centos7 追加python3 + 使用pip + virtualenv

    一.安装Python3的方法: 首先安装依赖包: yum -y groupinstall "Development tools" yum -y install zlib-devel ...

  9. Scala学习十——特质

    一.本章要点 类可以实现任意数量的特质 特质可以要求实现它们的类具备特定的字段,方法或超类 和Java接口不同,Scala特质可以提供方法和字段实现 当你将多个特质叠加在一起时,顺序很重要——其方法先 ...

  10. Scala学习八——继承

    一.本章要点 extends,final关键字和Java一样 重写方法时必须使用override 只有主构造器可以调用超类的构造器 可以重写字段 二.扩展类 Scala扩展类和Java一样(使用ext ...