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之Ajax运用 学习运用篇
Sep 26 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
浅析JS运动
Dec 28 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
JavaScript利用键盘码控制div移动
Mar 19 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函数,php爱好者站推荐
2007/03/19 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
pyramid配置session的方法教程
2013/11/27 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
中学生励志演讲稿
2014/04/26 职场文书
团支部建设方案
2014/05/02 职场文书
统计专业自荐书
2014/07/06 职场文书
商铺门前三包责任书
2014/07/25 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
单位工作证明书格式
2014/10/04 职场文书
质量保证书格式
2015/02/27 职场文书
教师节领导致辞
2015/07/29 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB