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中引入后来调用使用

1、common.js中

    var common = {
    //密码检测
      checkPassword:function(password) {
      },
      //微信环境支持
      verifyWechat:function () {
      },
      //  手机号码检测
      checkPhone:function (param_str) {  
      }
    };
    export default common;

2、在main.js中全局引用

import  common 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)){
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue中修改export default中脚本报一大堆错的问题

    在写vue代码的时候遇到了一修改.vue文件中export default下脚本的时候总是报一堆莫名其妙的错误的问题: 出错原因: 在构建项目的时候Use ESLint to lint your code? (Y/n)选择了y,规范了js代码 解决途径: 在webpack.base.conf.js里面删掉/注释掉: { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), r

  • Vue的export default和带返回值的data()及@符号的用法说明

    Vue的export default和带返回值的data()及@符号的用法说明

    目录 export default和带返回值data()及@符号用法 export和export default的使用 export的使用 export default的使用 export default和带返回值data()及@符号用法 一直以来很费解为什么vue组件有的写成export default,有什么用? 声明一个vue,相当于 new Vue({}) 达到可复用的目的,也就是说,export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件中的方法和变

  • 浅谈vue-props的default写不写有什么区别

    注意 default 不要写成 defaults 例如有一个名为mk-test的组件如下: <template> <div>{{maxLength}}</div> </template> <script> export default { props: { maxLength: { type: Number, default: 1 } } } </script> 当父组件这样调用时: <mk-test></mk-te

  • 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项目中使用AES实现密码加密解密（ECB和CBC两种模式）

    vue项目中使用AES实现密码加密解密 区别 ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文. CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度.(不容易主动攻击,安全性好于ECB,是SSL.IPSec的标准) 代码实现 先安装 crypto-js npm install crypto-js --save-dev ECB模式: import CryptoJS from "cryp

  • Vue项目中CSS Modules和Scoped CSS的介绍与区别

    目录 背景 CSS Modules 原理 规则 :global选择器 Vue3新特性 Scoped CSS 原理 规则 深度作用选择器 Vue3新特性 二者的比较 总结 背景 在前端工程化飞速发展的时候,作为非编程语言的CSS在融入模块化的浪潮时产生了很多问题: 无法做到样式模块化 组件化开发是前端模块化的核心,但是原生CSS的思想是样式的层叠,对于组件来说并不友好,会造成组件样式被覆盖等问题. 于是我们希望样式是存在作用域的,即在组件的作用域内,组件样式只对该组件生效. 命名混乱 在大型项目中

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件

  • 如何去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path:

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

随机推荐