什么是组件?

组件是vue.js最强大的功能之一。它可以扩展HTML元素,封装可重用的代码。在更高的层次上,组件是自定义的元素,vue的编译器给它添加特殊功能。其实在有些情况下,组件也可以是原生HTML元素的形式。用is特性扩展。

注册

要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如:
Vue.component('my-component', {
// 选项
}) 对于自定义标签名,Vue.js 不强制要求遵循 W3C规则 (小写,并且包含一个短杠),尽管遵循这个规则比较好。 组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前 注册了组件:
//html
<div id="example">
<my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
template: '<div>这是一个自定义的组件</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
渲染为:
<div id="example">
<div>这是一个自定义的组件!</div>
</div> 局部注册 不必在全局中注册每一个组件,通过使用组件实例选项注册,可以使组件仅在一个实例或者组件的作用域中使用。 var child = {
template :'<div>这是一个局部组件</div>'
} new Vue({
//....
components:{
//my-component这个组件只在父模板可以使用
'my-component':child
}
})

vue2.0---组件的更多相关文章

  1. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  2. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  3. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  4. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  5. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  6. 转:Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  7. Vue2.0组件之间通信(转载)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  8. Vue2.0组件实现动态搜索引擎(一)

    原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...

  9. Vue2.0组件的继承与扩展

    如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...

  10. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

随机推荐

  1. Android核心组件 Activity组件

    1.Activity简介 四大组件之一的Activity组件,在应用中一个Activity可以用来表示一个界面,中文意思也可以理解为"活动",即一个活动开始,代表Activity组 ...

  2. java中IO流异常处理

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  3. ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现

    在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelVa ...

  4. HAProxy介绍

    简单说明 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需 ...

  5. linux系统如何管理文件

    硬盘中的静态文件和inode(i节点) (1)文件平时都在存放在硬盘中的,硬盘中存储的文件以一种固定的形式存放的,我们叫静态文件. (2)一块硬盘中可以分为两大区域:一个是硬盘内容管理表项,另一个是真 ...

  6. Java Web中的中文编码

    Java Web开发中经常会遇到中文编码问题,那么为什么需要编码呢?因为人类需要表示的符号太多,无法用1个字节来表示,而计算机中存储信息最小单元为1个字节.所以必须指定char与byte之间的编码规则 ...

  7. Quartz实现任务调度

    一.任务调度概述 在企业级应用中,经常会制定一些"计划任务",即在某个时间点做某件事情,核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作,任务调度涉及多线程并发. ...

  8. Winform进程、线程

    进程: 一般来说,一个程序就是一个进程,不过也有一个程序需要多个进程支持的情况. 进程要使用的类是:Process它在命名空间:System.Diagnostics; 1.静态方法Start(); 2 ...

  9. ios开发中的小技巧

    在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新. UITableView的Group样式下顶部空白处理 //分组列表头部空白处理 UIView *view = [[UIViewal ...

  10. Could not load type 'System.Web.Mvc.ViewPage<dynamic>' in asp.net mvc2 after publishing the website

    在WebConfig里 找到 <pages></pages> <pages pageParserFilterType="System.Web.Mvc.ViewT ...