<html>

<head>

    <title>vue创建组件</title>

    <meta charset="utf-8">

</head>

<body>

    <div id="app">

        <my-com1></my-com1>

        <my-com2></my-com2>

        <my-com3></my-com3>

    </div>

    <div id="app2">

        <private></private>

    </div>

    <template id="temp1">

        <div>

            <h3>这是通过template元素在外部定义的组件结构</h3>

        </div>

    </template>

    <template id="temp2">

        <div>

            <h3>这是一个私有组件</h3>

        </div>

    </template>

</body>

<!-- 这里请引入cdn或者是下载到本地的vue.js -->

<script src="node_modules\vue\dist\vue.js"></script>

<script>

    //ps:组件模板只能有一个根元素

    //一、创建全局的组件

    //方式1 使用中间变量

    //1.1使用extend创建

    var com1 = Vue.extend({

        template:'<h3>这是使用Vue.extend创建的组件</h3>'

    })

    //1.2使用Vue.component(),定义组件的名称

    Vue.component('myCom1',com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写，并以-连接两个单词，不使用则引用时标签名与定义一致

    //方式2 不使用中间变量

    Vue.component('myCom2',Vue.extend({

        template:'<h3>这是使用Vue.component创建的组件</h3>'

    }))

    //更简洁的方式

    Vue.component('mycom2',{

        template:'<h3>这是使用Vue.extend创建的组件</h3>'

    })

    // 方式3 通过在template元素，在被控制的#app外面定义组件的模板

    Vue.component('myCom3',{

        template:'#temp1'

    })

    let vm = new Vue({

        el: "#app",

        data:{

        }

    });

    //二、创建私有组件

    let vm2 = new Vue({

        el: "#app2",

        data:{

        },

        components:{

            private:{

                template:"#temp2"

            }

        }

    });

</script>

</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. 从0开始学爬虫11之使用requests库下载图片

    从0开始学爬虫11之使用requests库下载图片 # coding=utf-8 import requests def download_imgage(): ''' demo: 下载图片 ''' h ...

  2. shell编程系列16--文本处理三剑客之awk模式匹配的两种方法

    shell编程系列16--文本处理三剑客之awk模式匹配的两种方法 awk的工作模式 第一种模式匹配:RegExp 第二种模式匹配:关系运算匹配 用法格式对照表 语法格式 含义 RegExp 按正则表 ...

  3. 零基础学Python-第二章 ：Python基础语法-05.基础数据类型

    打开终端,输入python3,这就进入了python的命令提示符. 输入type(8),返回的是int类型.用来type来判断当前的是什么类型. 字符串8转int类型. 数字123转字符串 布尔类型的 ...

  4. Qt编写气体安全管理系统20-控制器管理

    一.前言 控制器管理,主要就是对控制器进行添加删除和修改,其中包括编号.端口名称.控制器名称.控制器地址.控制器型号.探测器数量这几个字段,端口名称表示当前控制器所属哪个端口,一个系统中可以有好多个端 ...

  5. python初级 0 出发吧

    一.与Python交互 键入命令(指令)后,Python立即执行这个命令 1 进入notebook交互编程环境 进入notebook环境, 点击New菜单下的Python 3环境进入到交互编程环境 2 ...

  6. MyBatis-Spring项目

    使用Spring IoC可以有效管理各类Java资源,达到即插即拔功能:通过AOP框架,数据库事务可以委托给Spring处理,消除很大一部分的事务代码,配合MyBatis的高灵活.可配置.可优化SQL ...

  7. 利用Python来远程控制肉鸡自由操作，下一个黑客大佬就是你

    利用Python来远程控制肉鸡自由操作,下一个黑客大佬就是你 直接开始主题 Server:控制端 Client:被控端 具体实现 然后当有肉鸡连接的时候我们需要获得肉鸡的socket,并且记录下来,以 ...

  8. C#操作IIS程序池及站点的创建配置实现代码

    首先要对Microsoft.Web.Administration进行引用,它主要是用来操作IIS7: using System.DirectoryServices;using Microsoft.We ...

  9. Vue + ElementUI的电商管理系统实例02 主页

    1.打开Element网站,找到主页需要的布局格式 修改Home.vue: <template> <el-container class="home-container&q ...

  10. 修改centos的源, 使其能访问阿里云服务器

    1. 从拷贝以下文件到/etc/yum.repos.d/ 下; Centos-7.repo # CentOS-Base.repo # # The mirror system uses the conn ...