export default{} 和 new Vue()都是什么意思
在生成、导出、导入、使用 Vue 组件的时候,有些新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么,又有什么异同呢?
首先,Vue 是什么? 我的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:
new Vue({
el: '#app'
...
})
那么 export default {} 又是来干嘛的?
这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
所以在复用组件的时候,export 和 new Vue 缺一不可。
======================================================================
export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,如果根组件还包含其它子组件,那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例,最终形成一棵组件树。
export 和export default 的区别在于:export 可以导出多个命名模块,例如:
//demo1.js
export const str = 'hello world' export function f(a){
return a+1
}
对应的引入方式:
//demo2.js
import { str, f } from 'demo1'
export default 只能导出一个默认模块,这个模块可以匿名,例如:
//demo1.js
export default {
a: 'hello',
b: 'world'
}
对应的引入方式:
//demo2.js
import obj from 'demo1'
引入的时候可以给这个模块取任意名字,例如 "obj",且不需要用大括号括起来。
export default{} 和 new Vue()都是什么意思的更多相关文章
- export default {} 和new Vue()区别?
export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用. 而对于 new Vue({})部分, 只是创建一个Vue的实例 就是相当于创建一个根组件 h ...
- 关于 vue中 export default 和 new Vue({})
对于刚开始学习vue的人(像我),一般都不会清楚的知道两者之间该怎么区分,甚至觉得两者是一样的. 那么,经过我的查证,发现两者之间是没有任何联系的. export default ES6 Module ...
- export default {} 和new Vue()区别
1.export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用. 而对于export default 和export的区别: 在JavaScript ...
- Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...
- Vue 中 export default 和 module.exports
export default 服从 ES6 的规范,补充:default 其实是别名 module.exports 服从CommonJS 规范 一般导出一个属性或者对象用 export default ...
- !!误解--var vm = new vue({}) 与 export default {} 是一回事儿??
这两者完全不是同一回事.export default {} 是es6的module中的语法, 而var vm = new vue({}) 是创建一个vue实例.引起误解是因为用了webpack开发vu ...
- Vue的组件为什么要export default
Vue 的模块机制 Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: 此外,你还可以在bulid/webpack.base.conf.js文件中修改相关配置 ...
- Vue中 export default 和 export 区别
1.export与export default均可用于导出常量.函数.文件.模块等2.在一个文件或模块中,export.import可以有多个,export default仅有一个3.通过export ...
- vue中export default 在console中是this.$vm
vue中export default 在console中是this.$vm 用vue-cli搭出框架,用webstorm进行开发,参考vue2的官网进行教程学习, 在vue-cli中是用es6的exp ...
随机推荐
- centos 6.9 mysql 安装配置
1.全新系统,安装mysql yum -y install mysql mysql-server mysql-devel 2.启动mysql service mysqld start 3.修改密码 登 ...
- mysql 无法远程连接 没有监听端口
centos yum安装mysql: 远程连接完成用户授权和防火墙配置,可还是连接不上. 发现mysql没有监听3306端口. 修改mysql配置文件 vi /etc/my.conf 注释掉以下行,重 ...
- Html.Partial和Html.RenderPartial和Html.RenderAction区别
1.Html.Partical 把View页或模板解析成字符串然后输出到渲染页面上 @Html.Partical("viewxxx") 2.Html.RenderPartical则 ...
- vmware14克隆后UUID相同的解决方法
查看网卡 UUID值 [root@localhost network-scripts]# nmcli connection showNAME UUID TYPE DEVICE ens33 cf228d ...
- Python uuid库中 几个uuid的区别
在用到uuid库的时候,发现uuid有很多个,比较好奇,就查了一下他们的区别 uuid1()——基于时间戳 uuid2()——基于分布式计算环境DCE(Python中没有这个函数) uuid3()—— ...
- [Git] 011 checkout 与 reset 命令的补充
1. git checkout -- <file> 的示意 2. "checkout" 的补充 2.1 git checkout <branch_name> ...
- Dev Express之ImageComboBoxEdit,RepositoryItemImageComboBox使用方式
Dev Express之ImageComboBoxEdit,RepositoryItemImageComboBox使用方式 1.使用ImageComboBoxEdit实现下拉框键值数据函数 publ ...
- C#开发 WinForm如何在选项卡中集成加载多个窗体 实现窗体复用
http://blog.csdn.net/upi2u/article/details/37914909 最近需要做的一个项目,为了避免从菜单中选择的麻烦,需要把几个窗体集成到一起,通过TabContr ...
- 微信jssdk配置的问题,使用MVC制作的demo
一,view代码 <script src="~/Scripts/jquery-3.3.1.js"></script> <script src=&quo ...
- mysqldump导入导出
如果导入数据:使用mysqldump命令 导出数据和表的结构: 1.导出表数据和表结构 mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql(这个名字随便叫) #/usr/l ...