Vue.js入门教程-组件注册
一、组件创建
1.1 创建步骤
创建Vue的组件都有三个基本步骤是 【①创建组件构造器、②注册组件和③使用组件】。
1.2 基本示例
比如,我们创建一个Button组件。
// 1. 创建一个组件构造器
let myButton = Vue.extend({ // 模板选项template: `<button>点击我</button>`
}) // 2. 注册组件,并指定组件的标签,组件的HTML标签为<my-button>
Vue.component('my-button', myButton) // 组件名 构造器// 创建Vue实例
let app = new Vue({ el: '#app'
})
<!-- 3. #app是Vue实例挂载的元素 -->
<div id="app"> <my-button />
</div>
1.3 说明
(1)Vue.extend() 是Vue构造器的扩展,调用 Vue.extend() 创建的是一个组件构造器;
(2)Vue.extend() 构造器有一个选项对象,选项对象的 template 属性用于定义组件要渲染的HTML,简单的理解这个属性用来定义组件的模板(也就是组件的HTML结构);
(3)使用 Vue.component() 注册组件,在注册组件时需要提供两个参数,第一个参数是组件的标签(my-button),第二个参数是组件构造器(myButton);
(4)组件应该挂载到Vue实例,否则不会生效。这一点需要特别的注意。另外同一个组件可以同时挂载到多个Vue实例。
二、全局注册
(1)我们使用 Vue.component(tagName, options) 可以注册一个全局的组件,也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
let myButton = Vue.extend({ template: `<button>点击我</button>`
}) Vue.component('my-button', myButton)
(2)如上写法,我们也可以简写为
Vue.component('my-button', { template: `<button>点击我</button>`
})
(3)组件注册之后,便可以作为自定义元素 <my-button />,在一个实例的模板中使用。【注意】在初始化根实例之前注册组件。
<div id="app"> <my-button />
</div>
(4)【注意】对于自定义标签的命名,Vue不强制遵循W3C规则(小写,并且包含一个短杠),尽管这被认为是最佳实践。
三、局部注册
(1)通过某个Vue实例/组件的实例选项 components 注册,使用该选项注册的组件被称为局部注册。
let myButton = Vue.extend({ template: `<button>点击我</button>`
})let app = new Vue({ el: '#app',components: {'my-button':myButton}
})
<div id="app"> <my-button />
</div>
(2)得到的效果和注册全局组件是一样的。不同的是,如果你在另一个Vue实例中调用注册的局部组件,该组件不会生效。比如在app2这个实例中调用app中注册的组件my-button,就不会生效。
<div id="app2"> <my-button />
</div>
四、组件注册语法糖
4.1 作用
以上组件注册的方式有些繁锁,Vue为了简化组件注册的过程,提供了注册语法糖。
4.2 全局注册写法
(1)使用 Vue.component() 直接创建和注册组件。
// 注册全局组件 my-button
Vue.component('my-button', { template: `<button>点击我</button>`
})let app = new Vue({ el: '#app'
})
(2)Vue.component() 的第一个参数是组件标签名称,第二个参数是一个选项对象,使用选对象的 template 属性定义组件模板。
(3)使用这种方式,Vue在背后会自动调用 Vue.extend()来创建组件构造器。
4.3 局部注册写法
(1)在选项对象 components 属性中注册局部组件的语法糖。
let app = new Vue({ el: '#app',components: {'my-button': {template: `<button>点击我</button>` }}
})
(2)【注意】尽管注册组件的语法糖简化了组件注册,但在template选项中拼接HTML元素还是相当的麻烦,尽管ES6的语法让事情变得简单了不少,但也将导致HTML和JavaScript的高耦合性。
(3)【其他方式】庆幸的是,Vue除了上面这些语法糖之外,还提供了如下的方式。
Vue.component('my-button', { template: '#my-button'
})
<template id="my-button"><button>点击我</button>
</template>
更多系列文章在GitHub的地址 Vue.js入门教程
Vue.js入门教程-组件注册相关推荐
- Vue.js入门教程(适合初学者)
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Vue.js 入门教程
Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 A ...
- 【转】Vue.js入门教程(二)在页面中引入vue的方式
第二章:安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
- 【转】Vue.js入门教程(一)从静态页面到前后端分离开发
第一章:基础知识 我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
- Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
- js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
- vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
- 动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
- vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
最新文章
- 卡耐基梅隆大学计算机金融专业,卡耐基梅隆大学计算机金融硕士申请要求及专业优势...
- 《3D打印:正在到来的工业革命(第2版)》——1.6节先驱者们在做什么
- 用python的五种方式_Python模块重载的五种方法
- C#与C++之间dll的二维(多维)数组传递
- ASP.NET Core使用功能开关控制路由访问
- python网管系统_IT外包网管服务,Python密度聚类算法-DBSCAN实践
- 历史回顾——NLP问题解决方案的演变史
- 亚马逊EC2构建代理服务器心血历程
- 每个Java程序员必须知道的5个JVM命令行标志
- 3.数据结构 --- 栈和队列
- Create a Search Scope for a Sharepoint 2010 List or Library
- MySQL 8.0.19安装教程(windows 64位)
- VSCode去除.pytest_cache文件夹
- 【python】身份证识别
- JMeter常用函数整理
- 推荐系统实战(5)——基于内容的推荐算法(CB)
- Liunx 创建隐藏文件夹
- three.js 源码注释(一)./Three.js
- html页面日期显示带0,XHTML1.0与HTML兼容指引16条 小结
- 丛亚平:中国财富集中度超美nbsp;贫富…