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 相关文章推荐
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue中使用props传值的方法
May 08 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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
基于mysql的论坛(7)
2006/10/09 PHP
php引用传值实例详解学习
2013/11/06 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python 模板引擎的注入问题分析
2017/01/01 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python3匿名函数用法示例
2018/07/25 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python装饰器原理与用法深入详解
2019/12/19 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
本科生职业生涯规划书范文
2014/01/21 职场文书
学生党支部先进事迹
2014/02/04 职场文书
仓库管理计划书
2014/05/04 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
企业文化标语大全
2014/06/10 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
教师个人年终总结
2015/02/11 职场文书
python基础之停用词过滤详解
2021/04/21 Python
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP