注册一个全局组件

<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. php list()函数 语法

    php list()函数 语法 作用:用于在一次操作中给一组变量赋值.博智达 语法:list(var1,var2...) 参数: 参数 描述 var1 必需.第一个需要赋值的变量. var2,... ...

  2. P1092 虫食算——题解

    题目传送 (据说官方正解为高斯消元,但用搜索也能过,这里就讲讲搜索算法吧.) 对于一道搜索题,首先考虑一下大体怎样搜索.因为要考虑加法的进位,所以从左往右搜索对于考虑进位来说十分麻烦,而从右往左搜索就 ...

  3. String、StringBuffer与StringBuilder介绍

    关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.三者在执行速度方面的比较:     StringBuilder > St ...

  4. Coffee Chicken

    Coffee Chicken 字符串斐波那契 输出第s[n]个字符串的第k位及后十位 暴力算出前20项,超过20,跑dfs #include<bits/stdc++.h> using na ...

  5. document.referer

    参考文章: 深入理解document.referrer的用法

  6. Oracle---智斗ORA01427

    下面是我在做更新的时候遇到报ORA-01427,单行子查询返回多行值,原因是红色部分返回了多行值 UPDATE IN_MO IM      SET IM.BOM_ID =             (S ...

  7. 【转】SQL Pretty Printer for SSMS 很不错的SQL格式化插件

    源地址:https://www.cnblogs.com/leospace/archive/2012/09/04/SQL_Pretty_Printer_for_SSMS.html 写SQL语句或者脚本时 ...

  8. oralce创建dblink

    CREATE DATABASE LINK dblinkName CONNECT TO dbLoginName IDENTIFIED BY dbLoginPwd USING '(DESCRIPTION= ...

  9. SSH 连接慢 等好久

    SSH连接慢,要等好久好久,有时出现输入密码提示符,输入密码回车立即就超时了. ssh -v xxx.xxx.xxx.xxx   看到是GSS的问题. 解决办法,在两边SSH上配置,UseDNS如果被 ...

  10. linux中也有闹钟alarm, timer, stopwatch, world clock 等等

    stopwatch和timer的区别? timer叫计时器, 是先给出一个时间, 然后从现在开始, 倒数, 减少, 直到时间为0 stopwatch 叫跑錶, 则是从现在开始, 往后 增加时间, 事先 ...