<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./lib/Vue.js"></script>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

</head>

<body>

    <div id="app">

        <temp></temp>

        <com1></com1>

        <com3></com3>

    </div>

    <div id="app2">

        <temp1></temp1>

    </div>

    <template id="add">

        <h3>这是第三个组件</h3>

    </template>

</body>

<script>

    // 定义全局变量的组件

    //1 直接使用component

    Vue.component('temp', {

        template: '<h1>这是一个组件</h1>'

    })

    // 2 使用Vue.extend()定义一个组件

    var com1 = Vue.extend({

        template: '<h2>这是第二个组件</h2>'

    })

    Vue.component('com1', com1)

    //使用template标签 创建出来的组件

    Vue.component('com3', {

        template: '#add'

    })

    var vm = new Vue({

        el: '#app',

        data: {

        },

    })

    var vm2 = new Vue({

        el: '#app2',

        data: {

        },

        components: {

            //定义私有组件

            temp1: {

                template: '<h1>这是一个私有的组件，只能自己使用</h1>'

            }

        }

    })

</script>

</html>

Vue.js 注册组件的更多相关文章

  1. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  2. vue.js之组件（上篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  3. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  4. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  5. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  6. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  7. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  8. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  9. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

随机推荐

  1. vs2013 找不到帮助 help查看器

    我手贱把help查看器卸载了,打开帮助提示找不到帮助. 不想把vs重装,打开ios镜像,加载,cmd进入 到packages\Help 执行msiexec /i help3_vs_net.msi vs ...

  2. padding溢出

    一.padding溢出 参考代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. thrift的php-v0.12版本类自动加载失败

    参考网上教程,使用$loader->registerDefinition('Sample', $GEN_DIR); 但是会报PHP Fatal error:  Uncaught Error: C ...

  4. python二维码模块(qrcode)

    qrcode模块安装 运行命令行工具(cmd),使用pip安装工具分别安装qrcode. pip install qrcode 先来个简单的例子 import qrcode # 二维码内容 data ...

  5. 基于linux(CentOS7)数据库性能优化（Postgresql）

    基于CentOS7数据库性能优化(Postgresql) 1.  磁盘 a)         Barriers IO i.              通过查看linux是否加载libata,确定是否开 ...

  6. Django【第16篇】：Django之Form组件自定义验证规则

    自定义验证规则以及中间件简单介绍 1.python2和python3中的区别 对于python2内置的字符串类型有str和unicode 比如:"abc"是字符串,u"你 ...

  7. vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js

    在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...

  8. 阿里云虚拟主机MYSQL加密长度16位变61位

    将网站迁移到阿里云虚拟主机后, 用户登录都提供密码错误, 一查询才发现MYSQL PASSWORD加密结果不致, 只有16位, 解决办法,在执行PASSWORD查询前,执行set old_passwo ...

  9. 使用IDEA自动生成Java实体类

    在上一篇帖子里,我们已经通过idea连接上了数据库,这里,通过IDEA自带的功能来根据数据库字段生成POJO 1. 选中一张表,右键--->Scripted Extensions--->选 ...

  10. 最全面的H5的背景音效素材（经过实践），分享给你！！！

    个人内心独白: 这两天在为一个H5的页面寻找一些相关音效,茫茫的网络,辣么大,真是想法设法翻遍你,不说废话了,看总结吧哦 方法总结(这才是重点,看这里): 1.如果是部分铃声截取的,我们可以来到铃声之 ...