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 的 trim 函数的代码
Aug 13 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
node跨域请求方法小结
Aug 25 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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实现LOL数据远程获取
2014/06/10 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Javascript Select操作大集合
2009/05/26 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
vue 计时器组件的实现代码
2017/09/14 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
销售员自我评价怎么写
2013/09/19 职场文书
男方父母证婚词
2014/01/12 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
优秀求职信
2014/05/29 职场文书
主题党日活动总结
2014/07/08 职场文书
党员自我评价2015
2015/03/03 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL