vue2.0---组件
什么是组件?
组件是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---组件的更多相关文章
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转:Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue2.0组件之间通信(转载)
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件实现动态搜索引擎(一)
原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...
- Vue2.0组件的继承与扩展
如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...
- Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
随机推荐
- iOS 生成二维码
首先先下载生成二维码的支持文件 libqrencode 添加依赖库 CoreGraphics.framework. QuartzCore.framework.AVFoundation.framewor ...
- 最新Android系统版本与API等级对应关系表
最新Android系统版本与API等级对应关系表 从Android官网拷过来的,方便查阅... 官网地址:https://developer.android.com/guide/topics/mani ...
- FrozenUI - 专注于移动web的UI框架
http://frozenui.github.io/ 移动框架 重磅出击 简单易用,轻量快捷,为移动端服务的前端框架 开始使用 立即下载
- IT软件技术人员的职位路线(从程序员到技术总监) - 部门管理经验谈
以前写过一个文(IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章),主要介绍笔者的职业发展之路,不过该文需要后续了,因为笔者现在从事的是“产品经理”一职.从笔者的导航文([置顶]博文快 ...
- monkey命令选项参考
基本参数: --help 打印帮助消息 -v 可以在命令行中出现多次,每次一个-V选项都会增加monkey向命令行打印输出的详细级别.默认的级别0只会打印启动信息. ...
- javaweb项目jsp跳转servlet Error instantiating servlet class 问题
问题: HTTP Status 500 - Error instantiating servlet class RecommenderServlet type Exception report mes ...
- SqlServer SET IDENTITY_INSERT ON | OFF
想要将值插入到自动编号(或者说是标识列,IDENTITY)中去,需要设定 SET IDENTITY_INSERT 示例: 1.首先建立一个有标识列的表: )) 2.尝试在表中做以下操作: , 'gar ...
- What's new in Windows 10 Enterprise with Microsoft Edge.(Windows 10 新功能)
What's new in Windows 10 Enterprise with Microsoft Edge --带有Edge浏览器的Windows 10 企业版的新功能 本文摘录自公司群发邮件, ...
- vim 学习积累(一)
首先是简单的认识了三种状态(大家公认的说法是模式),分别是:插入,视图,和一般. 进入vim之后默认的是一般模式,这时直接使用'a', 'i', 'o'(也就是进入vim之后直接按下a/i/o键均可进 ...
- Spring JavaMail发送邮件
JavaMail的介绍 JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输. 虽然JavaMail是 ...