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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
用Python写冒泡排序代码
2016/04/12 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Python requests设置代理的方法步骤
2020/02/23 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
基于python实现对文件进行切分行
2020/04/26 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python如何代码集体右移
2020/07/20 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
小学美术兴趣小组活动总结
2014/07/07 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
女儿满月酒致辞
2015/07/29 职场文书