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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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 cron中的批处理
2008/09/16 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
解读ES6中class关键字
2017/11/20 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python读取图片任意范围区域
2019/01/23 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
python遍历路径破解表单的示例
2020/11/21 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
终止合同协议书
2014/04/17 职场文书
党员承诺践诺书
2014/05/20 职场文书
物流管理专业求职信
2014/05/29 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python