组件 (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. 如何实现数据库数据到Abp vnext实体对象的同步?以及代码生成工具

    在采用了EF Core的Code First方式下,如果你在数据库中直接添加了新表或存储过程,你需要在项目代码中手动反向工程这些数据库的更改,以保持Code First的代码与数据库同步.这种情况可以 ...

  2. 痞子衡嵌入式:在i.MXRT1xxx系列上用NAND型启动设备时可用两级设计缩短启动时间

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在i.MXRT1xxx系列上用NAND型启动设备时可用两级设计缩短启动时间. 去年痞子衡写过一篇骚操作文章 <借助i.MXRT10 ...

  3. RocketMQ 消息集成:多类型业务消息-普通消息

    简介: 本篇将从业务集成场景的诉求开始,介绍 RocketMQ 作为业务消息集成方案的核心能力和优势,通过功能场景.应用案例以及最佳实践等角度介绍 RocketMQ 普通消息类型的使用. 引言 Apa ...

  4. 全链路灰度新功能:MSE上线配置标签推送

    简介: 微服务场景下,全链路灰度作为一种低成本的新功能验证方式,得到了越来越广泛的应用.除了微服务实例和流量的灰度,微服务应用中的配置项也应该具备相应的灰度能力,以应对灰度应用对特殊配置的诉求. 为什 ...

  5. Flink 在唯品会的实践

    简介: Flink 在唯品会的容器化实践应用以及产品化经验. 唯品会自 2017 年开始基于 k8s 深入打造高性能.稳定.可靠.易用的实时计算平台,支持唯品会内部业务在平时以及大促的平稳运行.现平台 ...

  6. 代码安全无忧—云效Codeup代码加密技术发展之路

    简介: 从代码服务及代码安全角度出发,看看云效代码加密技术如何解决这一问题 代码数据存在云端,如何保障它的安全? 部分企业管理者对于云端代码托管存在一丝担心:我的代码存在云端服务器,会不会被泄露? 接 ...

  7. python之爬虫基础

    1.爬虫概念 其实就是模拟浏览器发送请求获取相应的数据 1.模拟请求 2.获取数据 3.筛选数据 4.保存数据 爬虫仅仅是将浏览器可以访问到的数据通过代码的方式加速访问 用于更加快速的获取数据,提升工 ...

  8. python+requests爬取B站视频保存到本地

    import os import datetime from django.test import TestCase # Create your tests here. import requests ...

  9. R_回归模型实例一

    工作和生活中存在大量的具有相关性的事件,当找到不同变量之间的关系,我们就会用到回归分析.回归分析(Regression Analysis):是用来确定2个或2个以上变量间关系的一种统计分析方法. 在回 ...

  10. 03. x86基础指令

    [说明] x86指令代码语法 制作程序时,指令数据使用代码表示,这些指令代码称为汇编代码,汇编代码由汇编器转换为对应的指令数据和数学数据. x86指令代码主要有两种语法:英特尔语法.AT&T语 ...