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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
获取url中用&隔开的参数实例(分享)
May 28 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
详解Node.JS模块 process
Aug 31 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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简单系统查询模块代码打包下载
2008/06/07 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
ThinkPHP路由详解
2015/07/27 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
javascript中的new使用
2010/03/20 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python zip文件 压缩
2008/12/24 Python
Python json模块使用实例
2015/04/11 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python Django基础二之URL路由系统
2019/07/18 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python 实现任务管理清单案例
2020/04/25 Python
python实现文法左递归的消除方法
2020/05/22 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
应届生求职信
2014/05/31 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书