组件 (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. 力扣2(java&python)-两数相加(中等)

    题目: 给你两个 非空 的链表,表示两个非负的整数.它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字. 请你将两个数相加,并以相同形式返回一个表示和的链表. 你可以假设除了数 ...

  2. OPLG:新一代云原生可观测最佳实践

    ​简介:OPLG 体系拥有成熟且富有活力的开源社区生态,同时也经过了大量企业生产环境的实践检验,是当下建设新一代云原生统一可观测平台的热门选择.但是,OPLG 只是提供了一个技术体系,如何灵活运用,解 ...

  3. 如何在golang代码里面解析容器镜像

    ​简介:容器镜像在我们日常的开发工作中占据着极其重要的位置.通常情况下我们是将应用程序打包到容器镜像并上传到镜像仓库中,在生产环境将其拉取下来.然后用 docker/containerd 等容器运行时 ...

  4. 深入解读 Flink SQL 1.13

    简介: Apache Flink 社区 5 月 22 日北京站 Meetup 分享内容整理,深入解读 Flink SQL 1.13 中 5 个 FLIP 的实用更新和重要改进. 本文由社区志愿者陈政羽 ...

  5. Serverless 工程实践 | Serverless 应用开发观念的转变

    ​简介: Serverless 架构带来的除了一种新的架构.一种新的编程范式,还包括思路上的转变,尤其是开发过程中的一些思路转变.有人说要把 Serverless 架构看成一种天然的分布式架构,需要用 ...

  6. [Docker] 镜像源配置 for Linux

    $ vi /etc/docker/daemon.json { "registry-mirrors": [ "https://docker.mirrors.ustc.edu ...

  7. [PHP] Laravel auth:airlock 更名 auth:sanctum

    本以为有了一种改善型的服务出来了,没想到不是. 关于 Laravel 现有的三大验证方式看这里:[PHP] 浅谈 Laravel 三大验证方式的区别, auth:api, passport, auth ...

  8. 基于EPCLYPS的DDS控制器(二)

    关于ZmodAWGController ZmodAWGController 介绍 双击IP核,进入的第一个界面会有Ch1 Gain Static Configuration的选项修改为 "0 ...

  9. 将Go开发的代码部署到k8s集群

    一.在服务器上编译go程序 1.1 编译go语言程序 # 安装go yum install go -y mkdir /root/test && cd /root/test # 设置代理 ...

  10. 应急响应--linux入侵排查