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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 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实现下载文件的两种方法
2013/07/05 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Django设置Postgresql的操作
2020/05/14 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
电气专业应届生求职信
2013/11/01 职场文书
激励员工的口号
2014/06/16 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014年教研室工作总结
2014/12/06 职场文书
纪录片信仰观后感
2015/06/08 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏