注册一个全局组件

<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. iOS 指定位置切圆角不生效问题

    如果是在VC中操作,需要在viewDidLayoutSubviews方法里 - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; ...

  2. 在 centos7.5 使用 DockerFile 构建镜像时报错 "Error parsing reference:"microsoft/dotnet:2.2-aspnetcore-runtime AS base"is not a valid repository/tag: invalid reference format"

    运行 dockerfile 时报出的错误 FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base Error parsing reference: & ...

  3. Linux内核设计与实现 总结笔记（第十四章）块I/O层

    一.剖析一个块设备 块设备最小的可寻址单元是扇区. 扇区大小一般是2的整数倍,最常见的是512字节. 因为各种软件的用途不同,所以他们都会用到自己的最小逻辑可寻址单元----块.块只能基于文件系统,是 ...

  4. sublime格式化

    https://nodejs.org/dist/v6.2.0/node-v6.2.0-x64.msi sublime格式化

  5. 170830-关于JdbcTemplate的练习题以及其中的问题

    实验1:测试数据源 在spring文件中配置: 测试数据源: 结果: 实验2:将emp_id=5的记录的salary字段更新为1300.00[更新操作] update函数中,第一个是sql语句,后面的 ...

  6. 170815-关于Session知识点

    Cookie:实际上就是一个头.               服务器会创建Cookie,并且将Cookie以一个响应头的形式发送给浏览器               浏览器收到Cookie以后,会保存 ...

  7. Linux下开启FTP服务

    一.配置步骤 1.安装vsftp 使用yum命令安装vsftp #yum install vsftpd -y 2.添加ftp帐号和目录 先确定nologin的位置,通常在/usr/sbin/nolog ...

  8. WAMPSERVER php

    The Apache service named reported the following error:>>> (OS 10013)An attempt was made to ...

  9. CMAK找不到相关编译器的问题

    本机安装了vs2019,在编译vulkansdk所带的samples时,遇到 错误提示: CMake Error at CMakeLists.txt: (project): Generator Vis ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_04 数据结构_5_数据结构_红黑树

    生活中的树和计算机中的树.计算机的树是倒着的