<!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. linux系统特殊权限位 suid、sgid、sticky

    linux系统特殊权限位 suid.sgid.stickysuid 使任意用户获得用文件属主相同的权限,sgid使用户获得与文件属组相同的权限(通过sgid获得的权限等同于同一用户组的权限) 表示方法 ...

  2. 【转】Linux下的磁盘分区方法

    转自:https://www.cnblogs.com/lbole/p/8904298.html 一.硬盘接口类型 硬盘的接口主要有IDE.SATA.SCSI .SAS和光纤通道等五种类型.其中IDE和 ...

  3. 长沙理工大学第十二届ACM大赛-重现赛I 主持人的烦恼 (sort)

    链接:https://ac.nowcoder.com/acm/contest/1/I 来源:牛客网 主持人的烦恼 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语 ...

  4. AlphaStar: Mastering the Real-Time Strategy Game StarCraft II 博客要点

    original blog:  https://deepmind.com/blog/alphastar-mastering-real-time-strategy-game-starcraft-ii S ...

  5. DevExpress ASP.NET Core Controls 2019发展蓝图（No.6)

    本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...

  6. html2canvas 把h5网页保存为图片 区域保存

    html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...

  7. @RequestBody、@RequestParam、@PathVariable区别与使用场景

    由于项目是前后端分离,因此后台使用的是spring boot,做成微服务,只暴露接口.接口设计风格为restful的风格,在get请求下,后台接收参数的注解为RequestBody时会报错:在post ...

  8. 35.ES6语法介绍——2019年12月24日

    2019年12月24日16:22:24 2019年10月09日12:04:44 1. ES6介绍 1.1 新的 Javascript 语法标准 --2015年6月正式发布 --使用babel语法转换器 ...

  9. java:集合输出Iterator,ListIterator,foreach,Enumeration

    //集合输出,集合的四种输出 Iterator, ListIterator, foreach, Enumeration 只要碰到集合,第一输出选择是Iterator类. Iterator<E&g ...

  10. HTML和CSS实现图片翻转效果

    实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...