<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. Flutter Offstage、Visibility隐藏/可见

    Offstage是控制组件隐藏/可见的组件,如果感觉有些单调功能不全,我们可以使用Visibility,Visibility也是控制子组件隐藏/可见的组件.不同是的Visibility有隐藏状态是否留 ...

  2. Mac 打开、编辑 .bash_profile 文件

    export PATH=${PATH}:/Users/loaderman/Library/Android/sdk/platform-tools export PATH=${PATH}:/Users/l ...

  3. 逐层解析请求json参数字符串【我】

    import net.sf.json.JSONObject; 逐层解析请求json参数字符串: InputStream inStream =null; BufferedReader br =null; ...

  4. **209. Minimum Size Subarray Sum 长度最小的子数组

    1. 题目描述 给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的连续子数组.如果不存在符合条件的连续子数组,返回 0. 示例: 输入: s = 7, nu ...

  5. Spring Boot 使用YAML配置

    YAML是JSON的一个超集,可以非常方便地将外部配置以层次结构形式存储起来.当项目的类路径中有SnakeYAML库(spring-boot-starter中已经被包含)时,SpringApplica ...

  6. [ kvm ] 学习笔记 4：KVM 高级功能详解

    1. 半虚拟化驱动 1.1 virtio 概述 KVM 是必须使用硬件虚拟化辅助技术(如 Intel VT-x .AMD-V)的 Hypervisor,在CPU 运行效率方面有硬件支持,其效率是比较高 ...

  7. Python文件的读取写入操作

    一.打开文件.关闭文件操作 想要读取文件或是写入文件,第一步便是打开文件,最后一步便是关闭文件.这里介绍两种打开(关闭)文件的方式: 1.open()方法 f=open(file_name[,acce ...

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

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

  9. linux系统卡顿 性能分析

    systemtrap 是一个内核开发者要掌握的工具. linux performance analysis 系统瓶颈性能分析软件

  10. python 最麻烦的时间有药了

    https://www.cnblogs.com/sunshineyang/p/6818834.html 一:经常使用的时间方法 1.得到当前时间 使用time模块,首先得到当前的时间戳 In [42] ...