vue-cli 组件的导入与使用教程详解


Posted in Javascript onApril 11, 2018

概述:

一个文件就是一个模块,需要引入模块,和暴露模块的方法

在一个组件中使用另一个组件三部曲:引入组件、注册组件、使用组件

1.main.js文件解读

.是整个项目的入口文件,在src文件夹下
.import(es6)引入vue和根组件app.vue
.最后new Vue,启动应用

vue-cli 组件的导入与使用教程详解

2、组件的使用

.定义的组件一般放到components目录下
.用一个组件的过程

a .被引用的文件暴露对象(如果组件中没有script,可以不需要暴露)

vue-cli 组件的导入与使用教程详解

b. 父组件引入子组件,注册组件(全局组件不需要引入),使用组件

vue-cli 组件的导入与使用教程详解

扩展:import

import OO from XX

1.import相当于var、let去声明一个变量OO(自定义,解构赋值都可以)

2.from:引入哪个文件

  .如果是自己定义的文件,一定要写相对路径‘./'
  .如果引入node——modules下的文件不需要写

  vue-cli 组件的导入与使用教程详解

     import 变量 from ‘模块路径
     import {解构赋值} from ‘模块路径
     import {* as 变量} from ‘模块路径

3.此时OO返回一个对象

4.如果希望对象中有内容,需要XX先暴露出对象,这样OO才能接收到并在当前文件使用。根据暴露对象的格式,决定接手变量的格式

.暴露多个对象,通过解构赋值接收

vue-cli 组件的导入与使用教程详解

.暴露多个对象,通过一个变量接收

vue-cli 组件的导入与使用教程详解

总结

以上所述是小编给大家介绍的vue-cli 组件的导入与使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
js中this用法实例详解
May 05 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 #Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 #Javascript
vue 组件高级用法实例详解
Apr 11 #Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 #Javascript
React如何避免重渲染
Apr 10 #Javascript
vue select组件的使用与禁用实现代码
Apr 10 #Javascript
vue 自定义 select内置组件
Apr 10 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
php 邮件发送问题解决
2014/03/22 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php微信开发之百度天气预报
2016/11/18 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
基于python爬取有道翻译过程图解
2020/03/31 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
银行简历自我评价
2014/02/11 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
三方协议书
2015/01/27 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
如何使用SQL Server语句创建表
2022/04/12 SQL Server