<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. prometheus + influxdb + grafana + mysql

    前言 本文介绍使用influxdb 作为prometheus持久化存储和使用mysql 作为grafana 持久化存储的安装方法 一 安装go环境 如果自己有go环境可以自主编译remote_stor ...

  2. pytorch设置多GPU运行的方法

    1.DataParallel layers (multi-GPU, distributed) 1)DataParallel CLASS torch.nn.DataParallel(module, de ...

  3. Linux下文件乱码问题

    通常编码会在windows环境下进行,当把windows下的代码拷贝到linux环境时,会出现 error: “build.sh /bin/bash^M: 坏的解释器:没有那个文件或目录” 等等类似问 ...

  4. 【Linux】宝塔上 GitLab数据迁移修改配置后nginx无法启动

    背景: 服务器A 向 服务器B 迁移数据,修改配置重启.发现gitlab的 nginx 无法启动. 查找原因 gitlab-ctl tail 错误信息: 网上查了查,似乎是宝塔的问题, 原因应该是为了 ...

  5. nginx调优（二）

    nginx调优(一) (1).Fastcgi调优 FastCGI全称快速通用网关接口(FastCommonGatewayInterface),可以认为FastCGI是静态服务和动态服务的一个接口.Fa ...

  6. springboot 项目基本目录包结构

    1.基本目录结构 controller service impl mapper utils domain config interceoter(拦截器) dto

  7. Python3 IO编程之序列化

    在程序运行的过程中,所有变量都是在内存中,比如定义一个dict >>> d=dict(name='Box',age=20,score=11) 可以随时修改变量,比如把'name'改成 ...

  8. Sublime Text3安装及常用插件安装

    为了使用强大好用的代码编辑器来进行selenium3+Python3的自动化测试. 使用Sublime Text 3非常适合. 1.下载安装 首先到http://www.sublimetext.com ...

  9. 安装Vim插件——ViPlugin

    打开Eclipse,找到Help——Install New Software  Name输入 viPlugin ,Location输入 viplugin.com ,点击OK 之后同意协议,然后等待下载 ...

  10. 【转载】我为什么放弃了 Linux 内核学习？

    最近学习内核很是心累,碰巧看到这篇文章,有点意思~ 转自http://happypeter.github.io/index.html,以下为原文内容: 我在国内的技术类网站 / 博客上, 时常会看到分 ...