大话谈VUE之export const

最近在整理项目，想了解一下VUE这个前后端分离的框架，这里没有顺序，遇到什么就写写，目的只是为了给自己加深印象和交流指正之用。

谈到export const，就有必要说到export default，那么这两个有什么区别呢？

在一个vue文件中export const可以有多个，但是export default只有且仅有一个；比如：

//demo1.js
// a
export const a = (params) => {return axios({method: 'post',url: '/api/a/b.json',data: qs.stringify(params)})
}
// b
export const b= (params) => {return axios({method: 'post',url: '/api/a/b.json',data: qs.stringify(params)})
}// c
export const c= (params) => {return axios({method: 'post',url: '/api/a/b.json',data: qs.stringify(params)})
}

在vue页面中可以引用多个，

//demo.vue
import {a} from 'demo1'
import {b} from 'demo1'
import {c} from 'demo1'
或
import {a,b,c} from 'demo1'

此时可以在页面中直接使用，

      //demo.vue   getA(dateType) {const self = this;//这里可以直接使用aa({dateType:dateType}).then(res => {if (res.data.returnCode === 0) {const returnData = res.data.returnData;const x= returnData.xAxisDataList;const ya= returnData.yAxisOrderNumDataList;const yb= returnData.yAxisSalesPriceDataList;const sg= returnData.seriesSaleGross;const legend = {data:['1','2','3'],bottom: 'bottom',}}}}

而export default的使用为：

//demo.vue
export default {name: 'index',data() {return {menuDataLimit:{},
//                展示1todaySituation: {orderNum1: '',price1: '',buyNum1: '',buyPrice1: ''},
//                展示2wholeSituation: {orderNum2: '',price2: '',buyNum2: '',buyPrice2: ''}}}
}

当然，这里是直接在页面中写的，如果是外部引用的话，是这样：

import dea from 'demo1' //导入的时候可以给这个模块任意取名字，且不需要用花括号

就到这里吧，欢迎指正！

大话谈VUE之export const相关推荐

父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
细谈 vue 核心- vdom 篇
很早之前,我曾写过一篇文章,分析并实现过一版简易的 vdom.想看的可以点击传送门聊聊为什么又想着写这么一篇文章,实在是项目里,不管自己还是同事,都或多或少会遇到这块的坑.所以这里当给小伙伴们再做 ...
Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...
anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用
如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (bi ...
浅谈Vue项目中用到的设计模式
什么是设计模式: 设计模式的原则是找出程序中的变化,并将变化封装起来,实现高效的可复用性.核心在于意图,而不在结构.通过设计模式可以帮助我们增强代码的可重用性.可扩充性. 可维护性.灵活性.我们使用设 ...
Vue中export和export default的区别和用法
Vue是通过webpack实现的模块化,因此可以使用import来引入模块,例如: import Vue from 'vue' import Router from 'vue-router' ...
浅谈Vue.js的优势
写在前面今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...
vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
java get请求数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...

大话谈VUE之export const

大话谈VUE之export const相关推荐

最新文章

热门文章