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同步Import,同步调用外部js的方法
Jul 08 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php 多文件上传的实现实例
2016/10/23 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Python创建xml的方法
2015/03/10 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Django 路由控制的实现
2019/07/17 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Python图像读写方法对比
2020/11/16 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
师德学习感言
2014/01/31 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
机关保密工作承诺书
2015/05/04 职场文书
新闻稿格式范文
2015/07/18 职场文书
小学英语教学随笔
2015/08/14 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android