vue组件 定义全局组件
组件 (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组件 定义全局组件的更多相关文章
- Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue基础学习 --- 全局组件与局部组件
组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- vue 自动注册全局组件
vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...
- vue定义全局组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- vue组件定义全局方法
1.在vue实例的data中定义一个对象 2.可以在其他组件定义方法 3.触发方法
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
- Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...
随机推荐
- 01_Vue技术-Hello案例分析
初始vue: 1.想让vue工作,就必须创建一个Vue实例,且要传入一个配置对象: 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法: ...
- 力扣367(java&python)-有效的完全平方数(简单)
题目: 给定一个 正整数 num ,编写一个函数,如果 num 是一个完全平方数,则返回 true ,否则返回 false . 进阶:不要 使用任何内置的库函数,如 sqrt . 示例 1: 输入: ...
- HarmonyOS NEXT应用开发——Navigation开发 页面切换场景范例
简介 在应用开发时,我们常常遇到,需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理,它提供了一系列属性方法来设置页面的标题栏.工具栏以及菜单栏的各种展示样式.除此之外 ...
- Docker部署Node应用简单实践
简介: 本文将从零至一,介绍如何在云服务器上通过 Docker 容器运行一个简单的Node应用. 前言 本文将从零至一,介绍如何在云服务器上通过 Docker 容器运行一个简单的Node应用.本文假设 ...
- Apsara Stack 同行者专刊 | 政企混合云技术架构的演进和发展
简介: 现在,政企客户已进入到用云计算全面替换传统IT基础架构的攻坚阶段,混合云与传统架构的技术产品能力也正在经历全面的比较与评估.阿里云混合云平台首席架构师张晓丹分享IT架构技术深刻洞察,并对政企混 ...
- 时序数据库永远的难关 — 时间线膨胀(高基数 Cardinality)问题的解决方案
简介: 本文主要讨论 influxdb 在遇到写入的数据出现高基数 Cardinality 问题时,一些可行的解决方案. 作者 | 徐建伟 (竹影) 前序 随着移动端发展走向饱和,现在整个 IT 行 ...
- dotnet 在 UOS 国产系统上安装 MonoDevelop 开发工具
本文告诉大家如何在 UOS 上安装 MonoDevelop 开发工具.本文使用的 UOS 是 UOS 20 x64 版本,这个系统版本是基于 debian 10 的,默认的 MonoDevelop 开 ...
- DOM操作学习
一.DOM对象-查找元素 # 1.直接查找 # 获取标签对象的方式: document.getElementById('#id') #根据ID获取一个标签(获取的是单独的对象) document.ge ...
- C#的基于.net framework的Dll模块编程(五) - 编程手把手系列文章
这次继续这个系列的介绍: 一.使用DLL类库的方法: 1) 静态类: 先引用该类库,然后声明命名空间,然后就能够进行使用了. 2) 动态类: 先引用该类库,然后声明命名空间,然后能够进行使用了. 3) ...
- join分析:shuffle hash join、broadcast hash join
Join 背景介绍 Join 是数据库查询永远绕不开的话题,传统查询 SQL 技术总体可以分为简单操作(过滤操作.排序操作 等),聚合操作-groupby 以及 Join 操作等.其中 Join 操作 ...