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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
手动用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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python读取oracle函数返回值
2016/07/18 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
python批量修改交换机密码的示例
2020/09/22 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
保护环境倡议书范文
2014/05/13 职场文书
原告离婚代理词
2015/05/23 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL