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.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
vue打包npm run build时候界面报错的解决
Aug 13 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源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
Vue.use源码分析
2017/04/22 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
pandas删除指定行详解
2019/04/04 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python中的yield from语法快速学习
2020/11/06 Python
python 实现有道翻译功能
2021/02/26 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
android面试问题与答案
2016/12/27 面试题
学生个人的自我评价分享
2013/11/05 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript