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 相关文章推荐
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue打包后显示空白正确处理方法
Nov 01 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
脚本收藏iframe
2006/07/21 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
对python中的装包与解包实例详解
2019/08/24 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
领导证婚人证婚词
2014/01/13 职场文书
党风廉政承诺书
2014/03/27 职场文书
劳资协议书范本
2014/04/23 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Python中使用ipython的详细教程
2021/06/22 Python