<!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. 解决solr无法加core

    提示缺少配置文件:Error CREATEing SolrCore 'new_core': Unable to create core [new_core] Caused by: Can't find ...

  2. html常见标签及用法整理

    <!DOCTYPE html> <!--#浏览器的兼容模式--> <html lang="en"> <head> <!--he ...

  3. 【leetcode】313. Super Ugly Number

    题目如下: 解题思路:总结一下这么几点,一出一进,优先级队列排序,保证每次输出的都是当前的最小值.解法大致如图: 代码如下: #include<map> #include<queue ...

  4. python+selenium实现发送一封带附件的邮件

    163邮件登录首页 登录成功断言是否有退出按钮 点击退出退出登录 from selenium import webdriver import unittest import time class Vi ...

  5. React Native 之组件的定义

    App.js 也可以认为是一个组件,那么此文件中能定义多个组件吗? 方式一 import Hello from './Hello' export default class App extends C ...

  6. 小程序封装wx.request，以及调用

    1.新建一个api目录,与pages同级 2.在api目录下新建一个api.js文件 3.编写代码 const host = 'http://test.test.cn' const wxRequest ...

  7. linux/Unix下的vim/vi指令的使用方法

    概述 以下这篇文章介绍的是关于vim的使用方法,由于我本身对linux没有太多的研究,写下的这篇文章纯属是在实际中经常使用vim指令,想通过这篇文章记录下来,方便以后使用时查找方便.个人认为,对于普通 ...

  8. oracle触发器update本表数据

    功能: 1. 允许/限制对表的修改 2. 自动生成派生列,比如自增字段 3. 强制数据一致性 4. 提供审计和日志记录 5. 防止无效的事务处理 6. 启用复杂的业务逻辑 开始 create trig ...

  9. 《SQL Server 2012 T-SQL基础》读书笔记 - 9.事务和并发

    Chapter 9 Transactions and Concurrency SQL Server默认会把每个单独的语句作为一个事务,也就是会自动在每个语句最后提交事务(可以设置IMPLICIT_TR ...

  10. anaconda 下载包速度慢

    更新清华镜像资源 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda ...