<!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. MySQl查询语句大全

    综合使用 查询 目录: #----综合使用 书写顺序 select distinct * from '表名' where '限制条件' group by '分组依据' having '过滤条件' or ...

  2. 执行rpm -ivh 时报错：error rpmdb BDB0113 Threadprocess 11690140458095421504 failed

    执行rpm -ivh 时报错:error rpmdb BDB0113 Threadprocess 11690140458095421504 failed 1.具体报错如下: [root@heyong ...

  3. 关于tomcat NoClassDefDoundErr异常的记录

    在做DRP项目的时候,copy了drp1.3,粘贴重命名成drp1.4,把drp1.4加入到tomcat中,发现drp1.4中新加的jsp可以正常运行,而从1.3那copy来的不能运行,抛出NoCla ...

  4. SQL SERVER将多行数据合并成一行（转）

    1)比如表中有三列数据: 2)执行如下查询: 1 SELECT [USER_NAME], [USER_ACCOUNT] 2 , [ROLE_NAME] = stuff(( 3 SELECT ',' + ...

  5. js的cookie写入存储与读取

    js的cookie写入存储与读取 在路径url截取需要的数据,存储到cookie里,读取成功并实现跳转. //写cookies 过期时间 2小时后 function setCookie(c_name, ...

  6. mysql 分页查询及优化

    1.分页查询 select * from table limit startNum,pageSize 或者 select * from table limit pageSize offset star ...

  7. ping/curl

    ping查看网络连通情况 curl查看接口可用情况

  8. 【leetcode】1111. Maximum Nesting Depth of Two Valid Parentheses Strings

    题目如下: A string is a valid parentheses string (denoted VPS) if and only if it consists of "(&quo ...

  9. IO流，字节流复制文件，字符流+缓冲复制文件

    JAVAIO如果按流向分:输入流和输出流两种 输入流的基类:InputStream   Reader 输出流的基类:OutputStream   Writer 如果按数据单元划分:字节流和字符流 字节 ...

  10. 6409. 【NOIP2019模拟11.06】困难的图论（Tarjan求点双）

    题目描述 Description 给定由 n 个点 m 条边组成的无向连通图,保证没有重边和自环. 你需要找出所有边,满足这些边恰好存在于一个简单环中.一个环被称为简单环,当且仅当它包含的所有点都只在 ...