<!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. 实习第一个月总结（const关键字、条件编译、volatile关键字、#和##的作用、函数指针）

    C语言中const关键字的作用: 修饰局部变量或者全局变量,表示变量n的值不能被改变了 修饰指针,分为常量指针与指针常量,也可以两者结合 常量指针指向的值不能改变,但是这并不是意味着指针本身不能改变, ...

  2. 简单的搭载Spring cloud框架

    大家不懂的可以在评论区给我留言

  3. makefile中=、：=和+=的区别

    经常有人分不清= .:=和+=的区别  这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...

  4. GCD和LCM

    GCD _ LCM 是给你两个数A B 的最大公约数, 以及最小公倍数 the greatest common divisor and the least common multiply ! 最大公约 ...

  5. 老贾的幸福生活day 04

    变量 变量名的规则: 变量名由字母,数字,下划线组成 变量名不能以数字开头 变量名要具有可描述性 变量名要区分大小写 变量名禁止使用python关键字 变量名不能使用中文和拼音 变量名推荐写法: 驼峰 ...

  6. winfrom_根据checkbox勾选项增减dgv字段列

    1.效果: 2.点击‘配置’按钮: private void btn_configure_Click(object sender, EventArgs e) { string sum = string ...

  7. Python——用turtle画一个月饼

    今天是中秋节,首先在这里祝大家中秋快乐!那么提到中秋,我们首先想到的当然是香甜的月饼,所以我今天就在这里画一个月饼送给大家. 那么 要用Python画图,我们必须掌握并运用Turtle库,这个可以自己 ...

  8. scala 面向对象之 继承

    scala 面向对象之 继承 scala   1.extends Scala中,让子类继承父类,与Java一样,也是使用extends关键字 继承就代表,子类可以从父类继承父类的field和metho ...

  9. js扩展Date对象的方法，格式化日期格式(prototype)

    扩展:Date.prototype.format = function(format){     var o =  {     "M+" : this.getMonth()+1, ...

  10. vue+ element 动态换肤

    转至 https://www.cnblogs.com/dengqichang/p/10364455.html 一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://elem ...