说明与比较:new Vue() 和 export default {}

在生成、导出、导入、使用 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 缺一不可。

原文地址:https://www.cnblogs.com/liubingyjui/p/10801628.html

时间: 2024-10-07 14:06:13

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

Vue 中 export default 和 module.exports

export default 服从 ES6 的规范,补充:default 其实是别名 module.exports 服从CommonJS 规范 一般导出一个属性或者对象用 export default 一般导出模块或者说文件使用 module.exports 以上来自网络,不一定准确,有待进一步确认. 附带: import from 服从ES6规范,在编译器生效 require 服从ES5 规范,在运行期生效 目前 vue 编译都是依赖label 插件,最终都转化为ES5.

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

对于刚开始学习vue的人(像我),一般都不会清楚的知道两者之间该怎么区分,甚至觉得两者是一样的. 那么,经过我的查证,发现两者之间是没有任何联系的. export default ES6 Module语法中的命令,是为了方便 使用import命令时 必须要知道所加载的变量名或函数名,否则无法加载的问题. 地址:http://es6.ruanyifeng.com/#docs/module#export-default-%E5%91%BD%E4%BB%A4 export default命令并不是在每

Vue中 export default 和 export 区别

1.export与export default均可用于导出常量.函数.文件.模块等2.在一个文件或模块中,export.import可以有多个,export default仅有一个3.通过export方式导出,在导入时要加{ },export default则不需要 4. (1) 输出单个值,使用export default (2) 输出多个值,使用export (3) export default与普通的export不要同时使用 示例: 1.export //a.js export const

VUE中使用的插件有哪些?为什么,不能自动补全,script,methods和export default?

老师就推荐了一个vue插件,叫vetur,但是为什么,不能自动补全,script,methods和export  default? 步骤 1. 先安装好 vetur 2. cmmond + , 在右侧配置相中添加如下代码(这个怎么找啊,草) "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" } 另一种配置是 在设置中 搜索emmet 然后

[vue]js模块导入导出export default

参考 参考 - export default s1 1.仅能出现1次default 2.导入时候可以随便命名 3,导出时候不必写{} - 常规的导出导入 1,必须{}格式 2,导入时必须{}匹配 3,a.js 和b.js导入main.js变量名不能重复 如果重复需 import * as obj1 from "./a.js" 的方式导 -- 栗子:导出2个变量 模块的导入导出: 1,导出 export 2,导入 import - a.js export let s1 = "m

关于VUE中 import 、 export 和 export default 的注意问题

1.import引入一个依赖包,不需要相对路径.import 引入一个自己写的js文件,是需要相对路径的. 示例:import axios from ‘axios’; import AppService from ‘./appService’; 2.import什么情况下,要用{}的方式引入,什么情况下,只需要一个变量就行.(1) 使用export抛出的变量需要用{}进行import: //a.js export function getList(){}; //b.js import { get

vue中export和export default的使用

1 export的使用 比喻index.js要使用test.js中的数据 首先在test.js文件中进行导出操作 在index.js文件进行导入操作 第一种方法: 此时的输出结果是: 注意: export 不能直接写成这样子 export{ "":"" // 这样会报错 .... } 2 export default的使用 test.js文件 index.js文件中: 输出的结果: 注意: export default let a=10 // 不能类似这样的写 一样

关于common.js里面的module.exports与es6的export default的思考总结

背景 公司项目需要裁切功能,基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库,仅限于公司内部使用) 在vue-cropper从0.4.0更新到0.4.4后,picture-cut组件使用裁切功能时报错 vue-cropper0.4.0的index.js文件导出方式如下 var vueCropper = require('./vue-cropper') module.exports = vueCropper vue-c

export default 和 export 的使用方式

1.ES6规定,导入模块使用 import 模块名称 from '模块标识符'; 或 import 'css资源路径':      ES6中,使用export default {name:'zs'}和export向外暴露成员. 在Node中,使用 var 名称 = require('模块标识符');来导入模块:使用module.exports= {name:'zs'}和exports来暴露成员 2.组件register.vue里面暴露数据 <template> <div> <