Vue组件的使用教程详解


Posted in Javascript onJanuary 05, 2018

官网:   https://cn.vuejs.org/v2/guide/components.html 

1.Vue组件的介绍

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

2.使用组件

对于自定义标签的命名 Vue.js 不强制遵循W3C 规则(小写,并且包含一个短杠)

组件在注册之后,便可以作为自定义元素  在一个实例的模板中使用。

注意:在初始化根实例之前注册组件

注册组件的时候,首先要编写需要的组件(相当于一个页面,包含js操作,css样式等),比如:

Vue组件的使用教程详解

新建一个头部组件

上面这个头部组件只有一句话,放在h标签中,使用的时候,需要先导出组件,即(export default 块),这样才能在需要该组件的位置使用import导入

export 和 export default使用的区别:

两个都是用于导出

不同之处在于:

export导出之后,在要接收的地方需要 import {变量名} from “位置”

此处,我在js文件中导出一个data的方法,然后在vue文件(组件)中使用

Vue组件的使用教程详解

输出组件

Vue组件的使用教程详解

需要的地方使用

export default导出之后,接收的地方 import 变量名 from “位置”

注意: ./ 代表当前位置

Vue组件的使用教程详解

输出组件

Vue组件的使用教程详解

在需要使用的位置import

接下来开始使用组件:

使用组件时需要先创建一个Vue实例,然后选中需要放置组件的位置(element),然后注册组件,放入选定的位置

Vue组件的使用教程详解

完成以上步骤,即可显示组件在页面上

Vue组件的使用教程详解

页面显示结果图

总结

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
初识Node.js
Mar 20 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 #Javascript
js中this对象用法分析
Jan 05 #Javascript
Node中使用ES6语法的基础教程
Jan 05 #Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 #Javascript
vue脚手架中配置Sass的方法
Jan 04 #Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
You might like
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
php eval函数用法总结
2012/10/31 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JavaScript类的写法
2016/09/17 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python实现多人聊天室
2020/03/31 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
学习python可以干什么
2019/02/26 Python
python3.x实现base64加密和解密
2019/03/28 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
护士感人事迹
2014/05/01 职场文书
2014离婚协议书范文
2014/09/10 职场文书