注册一个全局组件

<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. Ubuntu安装过程中的问题

    1.win10系统安装32bit ubuntu,使用VM安装ubuntu 的iso文件,刚启动不停按F2,进入BIOS,boot设置为 CD-ROM drive 2.安装界面都没有出现,电脑老是重启, ...

  2. 一本通【例题4】Addition Chains——题解

    又是一道剪枝剪了半天的搜索题...题目传送 要充分利用题目中的约束条件:1.:2.对于每个k(1≤k≤m)k(1≤k≤m)满足ak=ai+aj(0≤i,j≤k−1)ak=ai+aj(0≤i,j≤k−1 ...

  3. Oracle Where子句

    Oracle Where子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,将学习如何使用Oracle WHERE子句来指定过滤的条件返回符合 ...

  4. 利用python进行数据分析--pandas入门2

    随书练习,第五章  pandas入门2 # coding: utf-8 # In[1]: from pandas import Series,DataFrame import pandas as pd ...

  5. android中各种组件的生命周期问题

    1,activiy生命周期 http://www.ibm.com/developerworks/cn/opensource/os-cn-android-actvt/ 结合ativity的状态转换来看才 ...

  6. Gradle 学习笔记

    配置 Gradle 的环境变量 export GRADLE_HOME=/opt/software/java/gradle-3.1 export PATH=\(PATH:\)GRADLE_HOME/bi ...

  7. HDU 5073 Galaxy （数学）

    Galaxy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Su ...

  8. Extending Widgets with the Widget Factory

    https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ 实例 https://github.com/tkvw/jQue ...

  9. fedora23安装php,mysql

    httpd: 他的服务器根: ServerRoot, 是在/etc/httpd. 因为httpd所有的配置文件, 运行文件等都在这里.所以这是他的根. httpd的配置文件: httpd.conf恰好 ...

  10. Mac 10.14 下为php 安装xdebug 并让vscode支持

    安装Xdebug 寻找对应php版本的xdebug版本 先将info输出到一个文件 php -i > info.txt 打开info.txt 复制所有内容 打开寻找合适xdebug的页面http ...