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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
基于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
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
JS array 数组详解
2009/03/22 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
关于vue面试题汇总
2018/03/20 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
flask应用部署到服务器的方法
2019/07/12 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Python内置函数及功能简介汇总
2020/10/13 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
《北大荒的秋天》教学反思
2014/04/14 职场文书
环保小标语
2014/06/13 职场文书
python实现简易名片管理系统
2021/04/11 Python
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Python实现拼音转换
2021/06/07 Python
详解Python类和对象内容
2021/06/22 Python