<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. Linux下Mycat安装配置和使用

    mysql安装下载mysql[百度云]tar -zxvf mysql-5.6.32-linux-glibc2.5-x86_64.tar.gz 解压把mysql文件夹移动到 /usr/local/ 下m ...

  2. IOS 根据数组的个数对UIButton进行重复或循环使用

    //设置一个view view = [[UIView alloc] initWithFrame:CGRectMake(0, 38, 320, 30)]; view.backgroundColor = ...

  3. python学习：python打包成exe

    1) 安装pyinstaller pip install pyinstaller 目前已经支持 python 3.7 版本 2) 打开cmd窗口,进入到要打包的python文件所在目录, pyinst ...

  4. Hive开启mapjoin优化、并行执行、动态分区

    1. mapjoin优化适合小表join大表 set hive.optimize.skewjoin=true; //有数据倾斜时开启负载均衡,默认false set hive.auto.convert ...

  5. centos7上安装mysql8（下）

    1.修改root密码 MySQL8和5的密码加密方式不同,mysql_native_password是5的加密方式.mysql已经将之前的mysql_native_password认证,修改成了cac ...

  6. [转]C++ STL中的Binary search（二分查找）

    链接地址:https://www.cnblogs.com/wkfvawl/p/9475939.html

  7. 【JS新手教程】LODOP打印复选框选中的任务或页数

    之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...

  8. java程序cpu问题排查

    方法一: 转载:http://www.linuxhot.com/java-cpu-used-high.html 1.jps 获取Java进程的PID. 2.jstack pid >> ja ...

  9. elk问题汇总

    解决方案: https://blog.51cto.com/michaelkang/2298689?source=dra 使用postman.  PUT请求, JSON格式

  10. 关于反向生成url

    1.模板渲染 <form action="{% url "bieming" 参数 %}" > <input type="text&q ...