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的tab切换 js原理
Apr 01 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
JS触摸与手势事件详解
May 09 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
JS forEach跳出循环2种实现方法
Jun 24 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/11/25 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP实现简易blog的制作
2016/10/24 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
js精度溢出解决方案
2012/12/02 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
js实现消息滚动效果
2017/01/18 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python列表(List)知识点总结
2019/02/18 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Weblogc domain问题
2014/01/27 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python基础之数据结构详解
2021/04/28 Python
python3 字符串str和bytes相互转换
2022/03/23 Python