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 相关文章推荐
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
基于node实现websocket协议
Apr 25 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
Vue.use源码学习小结
Jun 20 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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排序算法(冒泡排序,快速排序)
2012/10/09 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
浅析JS运动
2015/12/28 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
python paramiko实现ssh远程访问的方法
2013/12/03 Python
详细介绍Python中的偏函数
2015/04/27 Python
Django的session中对于用户验证的支持
2015/07/23 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
数学系毕业生求职信
2014/05/29 职场文书
2014年班务工作总结
2014/12/02 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python