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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
js中apply和call的理解与使用方法
Nov 27 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
可以将word转成html的js代码
2010/04/11 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
详解Python中的__init__和__new__
2014/03/12 Python
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Django中间件基础用法详解
2019/07/18 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
如何强制垃圾回收
2015/10/06 面试题
银行开户授权委托书格式
2014/10/10 职场文书
个人先进事迹总结
2015/02/26 职场文书
优质护理服务心得体会
2016/01/22 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书