<!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. Ubuntu下安装Golong并用Vscode做IDE最有效方法，避免99%的坑 | 轻松学习GO

    最详细的教程,避开99%的坑,亲测有效 由于大部分教程都是win版本的,所以专门总结了一个linux版本的,其核心在于环境配置和插件安装,经历本人通宵7小时解决了这个问题,用自己的踩坑帮助大家避坑,希 ...

  2. Jenkins学习指南

    jenkinshttps://www.cnblogs.com/jimmy-xuli/p/9020825.htmlhttps://www.cnblogs.com/along21/p/10172855.h ...

  3. Ansj与hanlp分词工具对比

    一.Ansj 1.利用DicAnalysis可以自定义词库: 2.但是自定义词库存在局限性,导致有些情况无效: 比如:“不好用“的正常分词结果:“不好,用”. (1)当自定义词库”好用“时,词库无效, ...

  4. Jenkins+SVN持续环境搭建

    需要三台不同环境的服务器,SVN.Jenkins.Tomcat 1.SVN搭建 1.Subversion服务器(SVN服务器) 2.项目对应的版本库 3.版本库中钩子程序(用于触发构建命令) 在我以前 ...

  5. 一次生产的JVM优化

    背景 生产环境有二台阿里云服务器,均为同一时期购买的,CPU.内存.硬盘等配置相同.具体配置如下: 节点 CPU 内存 硬盘 其它 A 2CPU 4G 普通云盘 Centos6.4 64位+JDK1. ...

  6. 《深入理解 Java 虚拟机》学习 -- 垃圾收集器

    <深入理解 Java 虚拟机>学习 -- 垃圾收集器 1. Serial 收集器(新生代) 含义: 单线程收集器. 缺点: 进行垃圾收集时,必须暂停其他所有的工作线程. 优点: 简单而高效 ...

  7. 怎样查看或修改html的绝对路径

    查看用 Node.prototype.baseURI, 修改用 <base>; document.baseURI; // https://www.cnblogs.com/aisowe // ...

  8. 将磁盘从FAT格式转换为NTFS格式的方法

    不需要进行格式化,只需在命令提示符中输入如下内容:CONVERT X:/FS:NTFS把X换成你需要的盘符,转一个盘需十几或几十秒不等..注意:此方法不可逆转,FAT32转到NTFS后不可转回,当然也 ...

  9. JS基础_for循环

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 深入理解hadoop之排序

    MapReduce的排序是默认按照Key排序的,也就是说输出的时候,key会按照大小或字典顺序来输出,比如一个简单的wordcount,出现的结果也会是左侧的字母按照字典顺序排列.下面我们主要聊聊面试 ...