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下checked取值问题的解决方法
Aug 09 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
Angular 数据请求的实现方法
May 07 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
用JS实现选项卡
Mar 23 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
vue里使用create, mounted调用方法
Apr 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php $_SERVER当前完整url的写法
2009/11/12 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
JS基础之undefined与null的区别分析
2011/08/08 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
js实现微信聊天界面
2020/08/09 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
客户经理岗位职责
2013/12/08 职场文书
工程总经理工作职责
2013/12/09 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS