Vue项目中new|Vue项目中new Vue()和export default{}的区别说明

目录

  • new Vue()和export default{}区别
    • new Vue()
    • export default{}
  • import,export和export default注意问题

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

    new Vue()
    首先,Vue 是什么?
    我看其他博主的理解,很是赞同-> Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
    所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:
    new Vue({el: '#app'...})


    export default{}
    export default{}又是什么呢?
    ES6 Module语法中的命令,是为了方便 使用import命令时必须要知道所加载的变量名或函数名,否则无法加载的问题。
    详情可查看这里
    export default命令并不是在每个文件中都是必须的。它的作用只是用于导出模块,在别的模块需要调用这个模块的时候,可以通过import命令引入使用的。
    假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import,然后再生成一个 Vue 实例 new Vue (),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
    所以经过查证,发现两者之间是没有任何联系的。

    import,export和export default注意问题 A.在公用js中,多个方法需要调用的话,可以在vue项目中进行export default,抛出一个变量,然后在vue中引入后来调用使用
    【Vue项目中new|Vue项目中new Vue()和export default{}的区别说明】1、common.js中
    var common = {//密码检测checkPassword:function(password) {},//微信环境支持verifyWechat:function () {},//手机号码检测checkPhone:function (param_str) {}}; export default common;

    2、在main.js中全局引用
    importcommon from'../static/js/common' Vue.prototype.$common= common;

    3、在vue中引用该方法
    if(!this.$common.checkPhone(this.nameValue)){}

    B.在公用js中,单个方法需要调用的话,可以在vue项目中进行export,抛出方法名,然后在vue中引入后来调用使用
    1、common.js中
    //密码检测function checkPassword(password) {},//微信环境支持function verifyWechat() {},//手机号码检测function checkPhone(param_str) {}}; export{common};

    3、在vue中引用该方法
    import {common} from'../static/js/common' if(!common.checkPhone(this.nameValue)){}

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

      推荐阅读