Vue中export default{}和new Vue()的区别
发布日期:2021-06-21 03:00:24 浏览次数:5 分类:技术文章

本文共 679 字,大约阅读时间需要 2 分钟。

新手常常会被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。

 Vue 就是一个构造函数,new Vue({})生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:

new Vue({
    el: '#app'
    ...
})

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export default仅有一个。 

//demo.js 声明部分

export const str = 'hello world'

export function f(b){

    return b+1
}

//demo1.js 导出部分

import { str, f } from 'demo' //也可以分开写两次,导入的时候带花括号

假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import,然后再生成一个 Vue 实例 new Vue (),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

转载地址:https://blog.csdn.net/Kwoky/article/details/103486565 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:npm 全局安装和局部安装的区别
下一篇:动态属性

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年04月05日 21时09分14秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章