在生成、导出、导入、使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{}。它们含义到底是什么,又有什么异同呢?

首先,Vue 是什么? po 主的理解是 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 缺一不可。

说明与比较:new Vue() 和 export default {}的更多相关文章

  1. vue中export default 在console中是this.$vm

    vue中export default 在console中是this.$vm 用vue-cli搭出框架,用webstorm进行开发,参考vue2的官网进行教程学习, 在vue-cli中是用es6的exp ...

  2. new Vue() 和 export default {}及Vue页面组件和标签组件说明与比较(非常重要)

    说明与比较:new Vue() 和 export default {} (1)vue就是一个构造函数 (2)vue标签组件:是HTML标签的扩展https://www.cnblogs.com/w-wa ...

  3. Vue 中 export default 和 module.exports

    export default 服从 ES6 的规范,补充:default 其实是别名 module.exports 服从CommonJS 规范 一般导出一个属性或者对象用 export default ...

  4. 关于 vue中 export default 和 new Vue({})

    对于刚开始学习vue的人(像我),一般都不会清楚的知道两者之间该怎么区分,甚至觉得两者是一样的. 那么,经过我的查证,发现两者之间是没有任何联系的. export default ES6 Module ...

  5. !!误解--var vm = new vue({}) 与 export default {} 是一回事儿??

    这两者完全不是同一回事.export default {} 是es6的module中的语法, 而var vm = new vue({}) 是创建一个vue实例.引起误解是因为用了webpack开发vu ...

  6. Vue中 export default 和 export 区别

    1.export与export default均可用于导出常量.函数.文件.模块等2.在一个文件或模块中,export.import可以有多个,export default仅有一个3.通过export ...

  7. export default{} 和 new Vue()都是什么意思

    在生成.导出.导入.使用 Vue 组件的时候,有些新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向.它们含义到底是什么,又有什么异同呢? 首先,Vu ...

  8. Vue的组件为什么要export default

    Vue 的模块机制 Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: 此外,你还可以在bulid/webpack.base.conf.js文件中修改相关配置 ...

  9. Vue 中 export及export default的区别

    相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...

随机推荐

  1. js设计模式之实现观察者模式实例代码

    前端界面 html代码 <body> <select name="" id="select"> <option value=&qu ...

  2. 题解【CJOJ2608】[JZOJ 100043]第k小数

    P2608 - [JZOJ 100043]第k小数 Description 有两个非负整数数列,元素个数分别为N和M.从两个数列中分别任取一个数相乘,这样一共可以得到N*M个数,询问这N*M个数中第K ...

  3. awk从放弃到入门(1):awk基础

    一.awk简介 awk其名称得自于它的创始人 Alfred Aho .Peter Weinberger 和 Brian Kernighan 姓氏的首个字母.实际上 AWK 的确拥有自己的语言: AWK ...

  4. Java数组转集合之Arrays.asList()用法

    Arrays.asList()用法 使用Arrays.asList()的原因无非是想将数组或一些元素转为集合,而你得到的集合并不一定是你想要的那个集合. 而一开始asList的设计时用于打印数组而设计 ...

  5. chrome headless+selenium+python+(ubuntu 16.04/centos7) 下的实现

    Ubuntu 16.04 下: 0x01 安装chrome 1 下载源加入系统源列表 sudo wget http://www.linuxidc.com/files/repo/google-chrom ...

  6. APL: ANSYS Power Library

    1. creating accurate switching current waveforms (profiles) 2.output-state dependent decoupling capa ...

  7. jmeter的使用--添加自定义函数和导入自定义jar

    1.添加自定义函数,增加  号码生成函数 MobileGenerator和身份证生成函数IdCardGenerator 在package org.apache.jmeter.functions;中增加 ...

  8. Redis04——Redis五大数据类型 key

    key  keys *  查看当前库的所有键  exists <key>  判断某个键是否存在  type <key>   查看键的类型  del<key>  删除 ...

  9. Go_栈

    1. 栈的介绍 2. 栈的应用 3. 栈入门 package main import ( "fmt" "errors" ) //使用数组来模拟一个栈的使用 ty ...

  10. 设备驱动基础学习--misc device简单实现

    在Linux驱动中把无法归类的五花八门的设备定义为混杂设备(用miscdevice结构体表述).miscdevice共享一个主设备号MISC_MAJOR(即10),但次设备号不同. 所有的miscde ...