1. <html>
  2.  
  3. <head>
  4.     <title>vue创建组件</title>
  5.     <meta charset="utf-8">
  6. </head>
  7.  
  8. <body>
  9.     <div id="app">
  10.         <my-com1></my-com1>
  11.         <my-com2></my-com2>
  12.         <my-com3></my-com3>
  13.     </div>
  14.     <div id="app2">
  15.         <private></private>
  16.     </div>
  17.     <template id="temp1">
  18.         <div>
  19.             <h3>这是通过template元素在外部定义的组件结构</h3>
  20.         </div>
  21.     </template>
  22.     <template id="temp2">
  23.         <div>
  24.             <h3>这是一个私有组件</h3>
  25.         </div>
  26.     </template>
  27. </body>
  28. <!-- 这里请引入cdn或者是下载到本地的vue.js -->
  29. <script src="node_modules\vue\dist\vue.js"></script>
  30. <script>
  31.     //ps:组件模板只能有一个根元素
  32.     //一、创建全局的组件
  33.     //方式1 使用中间变量
  34.     //1.1使用extend创建
  35.     var com1 = Vue.extend({
  36.         template:'<h3>这是使用Vue.extend创建的组件</h3>'
  37.     })
  38.     //1.2使用Vue.component(),定义组件的名称
  39.     Vue.component('myCom1',com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写，并以-连接两个单词，不使用则引用时标签名与定义一致
  40.     //方式2 不使用中间变量
  41.     Vue.component('myCom2',Vue.extend({
  42.         template:'<h3>这是使用Vue.component创建的组件</h3>'
  43.     }))
  44.     //更简洁的方式
  45.     Vue.component('mycom2',{
  46.         template:'<h3>这是使用Vue.extend创建的组件</h3>'
  47.     })
  48.     // 方式3 通过在template元素，在被控制的#app外面定义组件的模板
  49.     Vue.component('myCom3',{
  50.         template:'#temp1'
  51.     })
  52.     let vm = new Vue({
  53.         el: "#app",
  54.         data:{
  55.  
  56.         }
  57.     });
  58.     //二、创建私有组件
  59.     let vm2 = new Vue({
  60.         el: "#app2",
  61.         data:{
  62.  
  63.         },
  64.         components:{
  65.             private:{
  66.                 template:"#temp2"
  67.             }
  68.         }
  69.     });
  70. </script>
  71.  
  72. </html>

　　效果：

vue创建组件的几种方法的更多相关文章

  1. Vue 创建组件的两种方法

    地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...

  2. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  3. Vue创建组件的三种方式

    1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入 ...

  4. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

  5. java创建线程的三种方法

    这里不会贴代码,只是将创建线程的三种方法做个笼统的介绍,再根据源码添加上自己的分析. 通过三种方法可以创建java线程: 1.继承Thread类. 2.实现Runnable接口. 3.实现Callab ...

  6. Solr创建Core的两种方法

    创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...

  7. 进程和创建线程的两种方法(threading.Thread)

    进程 如QQ 要以一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理, 网络接口的调用等,进程就是各种资源管理的集合 线程:是操作系统最小的调度单位,是一串指令的结合 进程 要操作 ...

  8. Java中创建数组的几种方法

    Java中创建数组的几种方法 public static void main(String[] args) { //创建数组的第一种方法 int[] arr=new int[6]; int intVa ...

  9. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

随机推荐

  1. flutter DropdownButton使用

    import 'package:flutter/material.dart'; class MyStatefulWidget extends StatefulWidget { MyStatefulWi ...

  2. asp程序里，如何判断一个字符串中存在包含了另一个字符串？

    1.判断是否包含某某字符函数是:Instr()和InstrRev();2.具体使用如下:ab="abcdefgHTTP"你可以用Instr()或者InstrRev()来判断if I ...

  3. 将一个多表关联的条件查询中的多表通过 create select 转化成一张单表的sql、改为会话级别临时表 【我】

    将一个多表关联的条件查询中的多表通过 create   select  转化成一张单表的sql 将结果改为创建一个会话级别的临时表: -- 根据下面这两个sql CREATE TABLE revenu ...

  4. Spring cloud微服务安全实战_汇总

    Spring cloud微服务安全实战 https://coding.imooc.com/class/chapter/379.html#Anchor Spring Cloud微服务安全实战-1-1 课 ...

  5. Delphi XE6 使用定时器或者线程解决程序界面无响应问题

    ---恢复内容开始--- 介绍 在手机应用上,我们不应该使用速度慢的代码,当然我们在桌面程序上也应该避免这个,当手机应用长时间没有相应的时候,程序会提示“程序没响应,是否关闭”的提示,这个非常不好,所 ...

  6. 【sqlalchemy】

    https://www.cnblogs.com/ccorz/p/5711955.html

  7. 《第一本Docker书》学习笔记——第3章 Docker入门

    3.1 确保Docker已经就绪 查看docker是否正常工作: sudo docker info 3.2 运行我们的第一个容器 现在,让我们尝试启动第一个Docker容器.我们可以使用docker ...

  8. 触屏Tap模拟事件

    触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...

  9. springboot的mapper.xml在src下问题

    在pom.xml里面的build标签加上resources说明 <resources> <!-- mapper.xml文件在java目录下 --> <resource&g ...

  10. xticks,yticks

    原本的图片如下所示: 如果加上这样的语句: import matplotlib.pyplot as plt plt.xticks([]),plt.yticks([]) 显示结果就为: