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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
div层的移动及性能优化
Nov 16 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 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 Mysql日期和时间函数集合
2007/11/16 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
九年级家长会邀请函
2014/01/15 职场文书
简历中的自我评价范文
2014/02/05 职场文书
安全生产承诺书范文
2014/05/22 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
中班下学期个人总结
2015/02/12 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL