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 相关文章推荐
JavaScript获取路径设计源码
May 22 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
原生js二级联动效果
Jun 20 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
vue插件实现v-model功能
Sep 10 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
vue给对象动态添加属性和值的实例
Sep 09 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
PHPCMS的使用小结
2010/09/20 PHP
php格式化json函数示例代码
2016/05/12 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
express express-session的使用小结
2018/12/12 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python 标准差计算的实现(std)
2019/07/29 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
使用python远程操作linux过程解析
2019/12/04 Python
Python使用进程Process模块管理资源
2020/03/05 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python中pivot()函数基础知识点
2021/01/03 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
销售副总经理岗位职责
2013/12/11 职场文书
施工安全承诺书
2014/05/22 职场文书
特此通知格式
2015/04/27 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL