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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
js事件机制----捕获与冒泡机制实例分析
May 22 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
重定向实现代码
2006/11/20 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python实现程序重启和系统重启方式
2020/04/16 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
公司拓展活动方案
2014/02/13 职场文书
《理想》教学反思
2014/02/17 职场文书
战略合作协议书范本
2014/04/18 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
工作简报范文
2015/07/21 职场文书
小学总务工作总结
2015/08/13 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang