组件 (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. 建设工程工程量清单计价规范2008最新分析报告ppt

    2008版<计价规范>颁布的背景 国务院从2003年起,在全国范围开展清理拖欠工程款.清理拖欠农民工工资的活动.最高人民法院于2004年9月29日发布了<关于审理建设工程施工合同纠纷 ...

  2. 大厂面试题:ReentrantLock 与 synchronized异同点对比

    写在开头 在过去的博文中我们学习了ReentrantLock 与 synchronized这两种Java并发使用频率最高的同步锁,在很多大厂面试题中有个经典考题: ReentrantLock 与 sy ...

  3. 【笔记】GO内建容器--数组

    go内建容器--数组 1.数量要写在类型的前面 2.可通过_省略变量 3.不仅是range,任何地方都可以使用_来省略变量 4.如果只要i,则可写成for i := range numbers 5.[ ...

  4. DataWorks功能实践速览 — 参数透传

    ​简介: DataWorks功能实践系列,帮助您解析业务实现过程中的痛点,提高业务功能使用效率! ​ 往期回顾: DataWorks 功能实践速览01期--数据同步解决方案:为您介绍不同场景下可选的数 ...

  5. ChatGPT 眼中的程序员

    1 你如何看待程序员这个行业 程序员这个行业在现代社会扮演着非常重要的角色.作为一个技术驱动的职业,程序员们负责开发.设计和维护软件和应用程序,这些技术改变了我们的生活方式.商业模式和社会互动方式. ...

  6. QT 连接 MySQL 版本问题

    问题现象 SSL connection error: unknown error number QMYSQL: Unable to connect 问题原因 出现这样的现象是因为我QT使用的是5.7的 ...

  7. 混合开发中,app内嵌h5页面时,安卓ios遇到的一些兼容问题及解决方法

    1.input[type=checkbox]在ios端样式显示异常,黑色背景或边框,安卓正常 解决: input[type=checkbox]:checked{ background-color: t ...

  8. 通过劫持线程arena实现任意地址分配 n1ctf2018_null

    通过劫持线程arena,当堆开了一个线程之后,如果没有做好保护随之的危险也悄然而至 BUU上的n1ctf2018_null很好的说明了这个问题 题目链接:BUUCTF在线评测 (buuoj.cn) 看 ...

  9. ORA-600 [kkqjpdpvpd: no join pred found.]

    场景 一个比较大的sql查询,报出了ORA-600 [kkqjpdpvpd: no join pred found.] 解决方法: 根据metalink提供的解决思路.当于当前session,执行如下 ...

  10. JWT 构建Rails API 授权登录

    目录 安装jwt组件 创建base_controller.rb控制器 配置路由 用户登陆-api接口 验证用户token信息-api接口(*) 参考下面的连接 使用Rails构建JSON-API ht ...