注册一个全局组件

<div id="app">

    <test></test>

</div>

<script>

// 注册全局组件

Vue.component('test', {

  template: '<h1>自定义组件!</h1>'

})

// 创建根实例

new Vue({

  el: '#app'

})

</script>

创建一个局部组件（只能在父模板中使用）

<div id="app">

    <test></test>

</div>

<script>

var Child = {

  template: '<h1>自定义组件!</h1>'

}

new Vue({

  el: '#app',

  components: {

    'test': Child

  }

})

</script>

组件化和模块化的区别：

模块化是从后台代码逻辑角度出发，方便代码分层开发，保证每个功能模块的职能单一

组件化是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用

<body>
<div class="app">
<my-com1></my-com1>
<my-com2></my-com2>
<my-com3></my-com3>
<my-com4></my-com4>
<mycom5></mycom5>
<!-- 注意如果注册组件时使用驼峰命名，需要大写改小写，并加上‘-’ -->
</div>
<template id="tmp1">
<div>
<h1>我是第四个全局组件</h1>
</div>
</template>
<template id="tmp2">
<div>
<h1>我是第yi个私有组件</h1>
</div>
</template>
<script>
var com1=Vue.extend({
template:"<h1>我是第一个全局组件,使用的是vue.extend</h1>"
})
Vue.component('myCom1',com1)
Vue.component('my-com2',Vue.extend({
template:'<h1>我是第二个全局组件</h1>'
}))
Vue.component('my-com3',{
template:'<div><h1>我是第三个全局组件</h1><h1>{{msg}}</h1></div>',
data:function() {
return({
msg:'hahahah'
})
}
})//无论是哪种创建组件的方式，在templa中必须有且只有一个根元素
Vue.component('my-com4',{
template:'#tmp1'
})
var vm = new Vue({
el:'.app',
components:{
mycom5:{
template:'#tmp2'
}
}
})
</script>
</body>

vue.js（16）--vue的组件的更多相关文章

  1. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  2. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  3. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. Vue.js 2.x：组件的定义和注册（详细的图文教程）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...

  6. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  7. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  8. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  9. 《前端福音，vue.js 之豆瓣电影组件大揭秘-video》

    {{ message }} 小胡子语法   在 Vue 中被称之为双花括号插值表达式 ---------------- http://todomvc.com/ TodoMVC是一款开源的JavaScr ...

  10. Vue.js 相关知识（组件）

    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...

随机推荐

  1. react native之使用 Fetch进行网络数据请求

    这是一个单独的页面,可以从其他地方跳转过来. 输入语言关键字,从github检索相关数据 import React, {Component} from 'react'; import { StyleS ...

  2. jsp格工化日期

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> .当后台传过来的时 ...

  3. Activiti的分配任务负责人(八)

    1分配任务负责人 1.1 固定分配 在进行业务流程建模时指定固定的任务负责人 在 properties 视图中,填写 Assignee 项为任务负责人.注意事项由于固定分配方式,任务只管一步一步执行任 ...

  4. DC.p4: programming the forwarding plane of a data-center switch

    Name of article:Dc. p4: Programming the forwarding plane of a data-center switch Origin of the artic ...

  5. angular 发送ajax

    在使用angular发送ajax的时候get和post一样的,就是method改一下. ajax的js: <script> var app = angular.module('emialV ...

  6. 基于Anaconda安装Tensorflow 并实现在Spyder中的应用

    基于Anaconda安装Tensorflow 并实现在Spyder中的应用 Anaconda可隔离管理多个环境,互不影响.这里,在anaconda中安装最新的python3.6.5 版本. 一.安装 ...

  7. centos 6.x 安装配置 node.js 环境

    下载 可以在本地下载node.js最新版,然后通过ftp工具上传到服务器,或者直接在服务器终端使用wget命令下载(我当时下载的是node-v6.11.3-linux-x64版本,其他版本请查看上面链 ...

  8. MySQL高可用方案 MHA之一MHA安装

    MHA0.58安装 MHA(Master High Availability)由两部分组成:MHA Manager(管理节点)和MHA Node(数据节点).管理节点mha4mysql-manager ...

  9. java valueOf

    valueOf 方法可以将原生数值类型转化为对应的Number类型,java.lang.Number 基类包括ouble.Float.Byte.Short.Integer 以及 Long派生类, 也可 ...

  10. LinkedTransferQueue 源码分析

    LinkedTransferQueue LinkedTransferQueue 能解决什么问题?什么时候使用 LinkedTransferQueue? 1)LinkedTransferQueue 是基 ...