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动态调整TextArea高度的代码
Dec 28 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
javascript import css实例代码
2008/07/18 Javascript
一些mootools的学习资源
2010/02/07 Javascript
Javascript调用C#代码
2011/01/17 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python __slots__的使用方法
2020/11/15 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
婚礼主持词
2014/03/13 职场文书
活动策划求职信模板
2014/04/21 职场文书
协议书样本
2014/04/23 职场文书
给市场的环保建议书
2014/05/14 职场文书
索赔员岗位职责
2015/02/15 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android