组件 (Component) 是 Vue.js 最强大的功能之一,它是html、css、js等的一个聚合体。

组件化

  • 将一个具备完整功能的项目的一部分分割多处使用
  • 加快项目的进度
  • 可以进行项目的复用

组件注册分为:全局注册和局部注册

全局注册

Vue.component('组件名称', { })第1个参数是标签名称,第2个参数是一个选项对象。全局组件注册后,任何vue实例都可以用。 注册组件就是给html添加一些自定义标签

组件注意事项:

² 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用,只有一个例外:data必须是函数,同时这个函数要求返回一个对象

² 组件模板必须是单个根元素

² 组件模板的内容可以是模板字符串

² 自定义组件需要一个根元素

Vue.component('HelloWorld', {

data(){

return {

msg: 'HelloWorld'

}

},

template: '<div>{{msg}}</div>'

});

定义全局组件,使用render来通过js对象的方式注册组件

使用template定义组件模板

vue组件 定义全局组件的更多相关文章

  1. Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  2. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  3. Vue基础学习 --- 全局组件与局部组件

    组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...

  4. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  5. vue 自动注册全局组件

    vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...

  6. vue定义全局组件

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  7. vue组件定义全局方法

    1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法

  8. vue.2.0-自定义全局组件

    App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...

  9. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

  10. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

随机推荐

  1. drf——基于apiview写过滤、排序和分页

    基于APIView带过滤和排序 from rest_framework.views import APIView from .models import Book from .serializer i ...

  2. 力扣429(java)-构造矩形(简单)

    题目: 作为一位web开发者, 懂得怎样去规划一个页面的尺寸是很重要的. 所以,现给定一个具体的矩形页面面积,你的任务是设计一个长度为 L 和宽度为 W 且满足以下要求的矩形的页面.要求: 你设计的矩 ...

  3. 阿里云 ACK 容器服务生产级可观测体系建设实践

    简介: 随着容器被越来越对企业接纳与落地,可观测成为重点.那么,让我们深入了解阿里云 ACK 容器服务生产级可观测体系建设实践,为自身业务可观测提供参考- 作者:冯诗淳(行疾)   ACK 可观测体系 ...

  4. 【Serverless实战】B站每日自动签到&&传统单节点网站的Serverless上云

    简介: Serverless好哇!这里将针对个人与生产两个应用方向的测评 使用Serverless实现自动获取每日B站的经验值,让你更快冲到LV6! 你的业务站点还是一台服务器All in One吗? ...

  5. [DApp] Moralis 生产阶段的服务安全设置 -锁定数据库

    Moralis 的基础设施数据库是使用的 MongoDB,其非常适合Dev阶段的快速开发. 如果进入生产环境,需要锁定数据库,防止任何用户可利用SDK向Mongo插入多余数据. 另外,Moralis ...

  6. WinForms 使用 Image 的 FromFile 方法加载文件和使用 Bitmap 有什么不同

    本文来告诉大家使用 GDI+ 的 Image.FromFile 加载图片文件和使用创建 Bitmap 传入图片文件有什么不同 如使用下面代码加载图片 using var image = Image.F ...

  7. dotnet ConditionalWeakTable 的底层原理

    在 dotnet 中有一个特殊的类,这个类能够做到附加属性一样的功能.也就是给某个对象附加一个属性,当这个对象被回收的时候,自然解除附加的属性的对象的引用.本文就来聊聊这个类的底层原理 小伙伴都知道弱 ...

  8. vue-单独引入css文件,设置公共的css样式或者修改默认的vant,mint样式

    1.css文件夹下新建global.css文件并粘贴复制: ======================= :root{     --bgColor : #d3252a;     --pinkColo ...

  9. ES_CCS/R(二):跨集群搜索 Cross-cluster search (CCS)

    跨集群搜索(cross-cluster search)使你可以针对一个或多个远程集群运行单个搜索请求. 例如,你可以使用跨集群搜索来筛选和分析存储在不同数据中心的集群中的日志数据. 示例 :在一个集群 ...

  10. 前端使用 Konva 实现可视化设计器(9)- 另存为SVG

    请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 另存为SVG 这一章增强了另存为的能力,实现" ...