组件 (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. 《Effective C#》系列之(五)——优化集合的使用

    一.优化集合的使用 在<Effective C#>这本书中,优化集合的使用是其中一章的内容.以下是该章节的一些核心建议,以及使用C#代码示例说明: 使用泛型集合:泛型集合可以避免装箱和拆箱 ...

  2. Oracle 将字符中含有的字母或特殊字符去除并将字符串置换成数字

    将字符中含有的字母或特殊字符去除并将字符串置换成数字 将字符中含有的字母或特殊字符去除并将字符串置换成数字 to_number(nvl(TRANSLATE(u.scsqrbzl, 'qwertyuio ...

  3. 力扣524(java)-通过删除字母匹配到字典里最长单词(中等)

    题目: 给你一个字符串 s 和一个字符串数组 dictionary ,找出并返回 dictionary 中最长的字符串,该字符串可以通过删除 s 中的某些字符得到. 如果答案不止一个,返回长度最长且字 ...

  4. PolarDB-X 高可用存储服务: 基于 X-Paxos 一致性协议

    简介: 摘自刘永平(慕少)阿里云 PolarDB-X 技术专家在PolarDB-X | 新品发布会中的讲解内容. 了解更多PolarDB-X 内容:https://developer.aliyun.c ...

  5. Joint Consensus两阶段成员变更的单步实现

    ​简介: Raft提出的两阶段成员变更Joint Consensus是业界主流的成员变更方法,极大的推动了成员变更的工程应用.但Joint Consensus成员变更采用两阶段,一次变更需要提议两条日 ...

  6. [K8s] Docker 单节点部署 Rancher

    Rancher 是通过 Web 界面管理 k8s 集群的工具,本身支持使用 Docker 启动. 单节点部署只需要 docker run 即可,易用性高,高可用部署可以使用 nginx 反向代理机制. ...

  7. uiautomator2环境搭建+元素定位(安卓)

    一.环境搭建 1.安装uiautomator2 在终端使用pip安装即可 pip install uiautomator2 2.安装adb 可参考:https://www.cnblogs.com/li ...

  8. kettle使用4-使用Pan.bat执行转换、Kitchen.bat执行作业

    一.直接在spoon中执行作业 使用bat文件执行速度比执行在spoon.bat中执行慢很多,如果少数几个任务,可以直接在spoon中执行. 1.新建作业 2.在通用中,新建START 任务执行的时间 ...

  9. java学习之旅(day.06)

    switch多选择结构 多选择结构还有一个实现方式就是switch case switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支 switch(expression ...

  10. c语言在Linux中的使用

    gcc版本升级 如何验证gcc正常使用,编译c以及运行 过程 要验证GCC(GNU Compiler Collection)是否正常使用,您可以按照以下步骤进行操作: 检查GCC是否安装:打开终端或命 ...