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子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
随机推荐
- 【容器云】十分钟快速构建 Influxdb+cadvisor+grafana 监控
本文作者:七牛云布道师@陈爱珍,DBAPlus社群联合发起人.前新炬技术专家.多年企业级系统的应用运维及分布式系统实战经验.现专注于容器.微服务及DevOps落地的研究与实践. 安装过程 三个都直接下 ...
- 搞不清FastCgi与PHP-fpm之间是个什么样的关系?
问 我在网上查fastcgi与php-fpm的关系,查了快一周了,基本看了个遍,真是众说纷纭,没一个权威性的定义. 网上有的说,fastcgi是一个协议,php-fpm实现了这个协议: 有的说,php ...
- hadoop-2.7.1伪分布环境搭建
1.准备Linux环境 1.0 点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet i ...
- Linux shell脚本编程(一)
Linux shell脚本编程: 守护进程,服务进程:启动?开机时自动启动: 交互式进程:shell应用程序 广义:GUI,CLI GUI: CLI: 词法分析:命令,选项,参数 内建命令: 外部命令 ...
- Docker中部署Kubernetes
Kubernetes为Google开源的容器管理框架,提供了Docker容器的夸主机.集群管理.容器部署.高可用.弹性伸缩等一系列功能:Kubernetes的设计目标包括使容器集群任意时刻都处于用户期 ...
- iOS实现渐变色背景(两种方式实现)
之前做过类似的功能,现在记录一下,来来来... 效果图: 说明=========================== 方法1: 说明:无返回值 用法:直接调用方法.原理是在view的layer层添加. ...
- Web site collections
Integration 伯乐在线 极客头条 Hacker News Stack Overflow RFC Search Security Python Hacker - Freebuf PrimalS ...
- 有理数的稠密性(The rational points are dense on the number axis.)
每一个实数都能用有理数去逼近到任意精确的程度,这就是有理数的稠密性.The rational points are dense on the number axis.
- Linux 管道的实现模型
//管道的实现 //当前目录下实现命令"ls | wc -w" #include <stdio.h> #include <stdlib.h> #includ ...
- linux重启mysql无法启动
如VPS新建后,重启则无法启动,出现类似 Starting MySQL ... * The server quit without updating PID file (/var/run/mysqld ...