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 25 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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相关资料
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python调用Windows命令打印文件
2020/02/07 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
元旦获奖感言
2014/03/08 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
班主任高考寄语
2015/02/26 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
开学典礼致辞
2015/07/29 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python