vue教程
vue
window本地保存Local Storage
保存：window.localStorage.setItem('名','值');
window.localStorage.setItem('token',backdata.data[2]);
查询：window.localStorage.getItem('名');
window.localStorage.getItem('token');
删除：window.localStorage.clear('名');
window.localStorage.clear('token');
删除所有：window.localStorage.clear();
删除指定：window.localStorage.removeItem('mid');
保存数组，取出数组
var dade = ['周一','周二','周三','周四','周五'];
存：window.localStorage.setItem('123',JSON.stringify(dade));
取：JSON.parse(window.localStorage.getItem('123'));
vue路由报错，虽然不影响，index.js加上
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
更新视图数据
this.$set(this,'shangp',0);
this是更新的位置，data的数据就是this
shangp是更新的名称，data里的shangp，
0表示数据改为0
下拉框不更新问题，改变以后，在写一条强制更新
this.$forceUpdate();
vue监听路由变化
//写在循环菜单列表界面就可以
watch:{
$route(to,from){
console.log(to.path);
}
},
下载
var url = this.urlimg+"/excel/"+e+'.xlsx';
let a = document.createElement('a');
a.href = url;
a.click();
vue打包
打包命令：npm run build
vue打包出现白屏es6语法转es5
Vue在IE、低版本Android显示空白问题
这是由于IE对promise的支持不好，我们需要安装：babel-polyfill和es6-promise:
npm install babel-polyfill
npm install es6-promise
然后在main.js文件中引用:
import ‘babel-polyfill’
import Vue from ‘vue’
import Es6Promise from ‘es6-promise’
Es6Promise.polyfill()
最后 build/webpack.base.conf.js 文件中app配置修改如下：
module.exports = {
entry: {
app: [“babel-polyfill”, “./src/main.js”]
} };
vue标签
事件
加载界面前加载（节点没出来）
created() {},
加载界面前加载（节点出来）
mounted(){},
被动触发事件
methods: {},
计算属性
computed:{},
侦听器
watch:{}
过滤器
filters:{}
v-text / v-html 文本
v-bind 属性绑定
动态绑定图片的路径
![]()
绑定a标签上的id
删除
绑定class
对象语法和数组语法
-
对象语法
如果isActive为true，则返回的结果为
<div id="app" v-bind:class="{active: isActive}"> hei div> <script> var vm = new Vue({ el: '#app', data: { isActive: true } }); script> -
数组语法
渲染的结果：
<div id="app" v-bind:class="[activeClass, dangerClass]"> hei div> <script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', dangerClass: 'text-danger' } }); script>
绑定style
对象语法和数组语法
-
对象语法
渲染的结果：
hei<div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}"> hei div> <script> var vm = new Vue({ el: '#app', data: { redColor: 'red', font: 40 } }); script> -
数组语法
渲染结果：
abc<div id="app" v-bind:style="[color, fontSize]">abcdiv> <script> var vm = new Vue({ el: '#app', data: { color: { color: 'red' }, fontSize: { 'font-size': '18px' } } }); script>
v-model 双向数据绑定
单向数据绑定
<div id="div">
<input type="text" :value="input_val">
div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
script>
双向数据绑定
<div id="div">
<input type="text" v-model="input_val" >
div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
script>
多行文本 / 文本域
<div id="div">
<textarea v-model="inp_val">textarea>
<div>{{ inp_val }}div>
div>
<script>
var app = new Vue({
el: '#div',
data: {
inp_val: ''
}
})
script>
绑定复选框
<div id="div">
吃饭：<input type="checkbox" value="eat" v-model="checklist"><br>
睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br>
打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br>
{{ checklist }}
div>
<script>
var vm = new Vue({
el: '#div',
data: {
checklist: ''
// checklist: []
}
});
script>
绑定单选框
<div id="app">
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
<br>
{{sex}}
div>
<script>
var vm = new Vue({
el: '#app',
data: {
sex: ''
}
});
script>
修饰符
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
<div id="div">
<input type="text" v-model.lazy="input_val">
{{input_val}}
div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
script>
v-on 绑定事件监听
click点击事件
<div id="app">
<input type="button" value="按钮" @click="cli">
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
script>
向事件处理器中传参
<div id="app">
<input type="button" value="按钮" @click="cli(1,3)">
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
// 接受参数
cli: function (a,b) {
alert(a+b);
}
}
});
script>
而此时，如果在处理器中需要使用事件对象，则无法获取，我们可以用特殊变量 $event 把它传入方法
methods: {
// 接受参数
cli: function (a,b,ev) {
alert(a+b);
console.log(ev);
}
}
事件修饰符a标签阻止浏览器的跳转
原生 JS 代码，想要阻止浏览器的默认行为(a标签跳转、submit提交)，我们要使用事件对象的 preventDefault() 方法
<div id="app">
<a href="http://www.qq.com" @click.prevent="cli">腾百万a>
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
script>
使用修饰符绑定一次性事件
<div id="app">
<a href="http://www.qq.com" @click.once="cli($event)">腾百万a>
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function (ev) {
ev.preventDefault();
alert('123');
}
}
});
script>
按键修饰符（键盘）
绑定键盘抬起事件，但是只有enter 键能触发此事件
<div id="app">
<input type="text" @keyup.enter="keyup">
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
keyup:()=>{
console.log('111')
}
}
});
script>
系统修饰符按住 shift 后才能触发点击事件
按住 shift 后才能触发点击事件
<div id="app">
<input type="button" value="按钮" @click.shift="cli">
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
script>
鼠标修饰符
鼠标中键触发事件
<div id="app">
<input type="button" value="按钮" @click.middle="cli">
div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
script>
v-show 显示隐藏
根据表达式之真假值，切换元素的 display CSS 属性。
<div id="app">
<p v-show="is_show">Vuep>
div>
<script>
var vm = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{},
})
script>
点击按钮切换隐藏显示
<div id="app">
<input type="button" value="按钮" @click="isshow">
<p v-show="is_show">Vuep>
div>
<script>
var vm = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{
isshow:function(){
this.is_show = !this.is_show;
}
},
})
script>
v-if / v-else / v-else-if 条件判断
https://cn.vuejs.org/v2/api/#v-if
<div id="app">
<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else-if="type === 'C'">
C
div>
<div v-else>
Not A/B/C
div>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'F'
},
})
script>
v-for 循环
https://cn.vuejs.org/v2/api/#v-for
<div id="app">
<ul>
<li v-for="(val,key) in arr">{{val}}---{{key}}li>
ul>
<ul>
<li v-for="(val,key) in obj">{{val}}---{{key}}li>
ul>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: { id: 1, name: '李四' }
},
})
script>
js里遍历
this.data.forEach(item => {
console.log(item)
});
var a = [1,2,3];
a.forEach(function(value,key,arr){
console.log(value) // 结果依次为1，2，3
console.log(key) // 结尾依次为0，1，2
console.log(arr) // 三次结果都为[1,2,3]，该参数貌似没什么用
})
v-cloak没加载好的时候隐藏
当我们的网络受阻时，或者页面加载完毕而没有初始化得到 vue 实例时，DOM中的 {{}} 则会展示出来；
为了防止现象，我们可以使用 CSS 配合 v-cloak 实现获取 VUE 实例前的隐藏；
<style>
[v-cloak] {
display: none;
}
style>
<div id="app">
<p v-cloak>{{obj.id}}p>
div>
<script src="./vue.js">script>
<script>
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
obj: { id: 1, name: '李四' }
},
})
}, 2000);
script>
v-once只渲染元素和组件一次
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过
<div id="app">
<p v-once>{{msg}}p>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'kkk'
},
})
script>
计算属性与侦听器
计算属性
注意，每次在模板中使用 {{ fullname() }} fullname方法就会被调用执行一次；所以，对于任何复杂逻辑，你都应当使用计算属性 ，因为计算属性，会自动缓存数据：
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
<br>
{{fulln}}
{{fulln}}
div>
<script>
var app = new Vue({
el: '#div',
data: {
xing:'',
ming:'',
},
computed:{
fulln(){
return this.xing+this.ming+Date.now();
}
}
})
script>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。
侦听器
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
div>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
this.fullname = newVal+this.ming;
},
ming:function(newVal,oldVal){
this.fullname = this.xing+newVal;
}
}
})
script>
通过上面的案例，我们基本掌握了侦听器的使用，但是我们也发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
div>
<script src="./jq.js">script>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
// this.fullname = newVal+this.ming;
var t = this;
// 在侦听器中执行异步网络请求
$.get('./xx.php',(d)=>{
t.fullname = d;
})
},
}
})
script>
过滤器
过滤敏感词汇
<div id="app">
<input type="text" v-model="msg"> <br>
{{msg|myFilters|get3}}
div>
<script>
var app = new Vue({
el: '#app',
data:{
msg:''
},
//定义过滤器
filters:{
// 过滤器的名称及方法
myFilters:function(val){
return val.toLowerCase();
},
get3:function(val){
// 遇到数字替换为 0
// var reg = /\d/g;
// return val.replace(reg,0);
return val.replace('苍井空','***');
}
}
})
script>
全局过滤器
上面的代码中，myFilters 及 get3 两个过滤器，仅在当前 vue 实例中可用；如果在代码 再次 var app2 = new Vue() 得到变量为 app2 的 vue 实例，则两个过滤器在 app2中都不可用；如果需要过滤器在所有实例对象中可用，我们需要声明 全局过滤器
Vue.filter(名称,处理器)
<div id="app">
<input type="text" v-model="msg"> <br>
{{msg|myFilters}}
div>
<div id="app2">
<input type="text" v-model="msg"> <br>
{{msg|myFilters|get3}}
div>
<script>
Vue.filter('myFilters', function (val) {
return val.toLowerCase();
})
// 定义两个全局过滤器
Vue.filter('get3', function (val) {
return val.replace('苍井空','***');
})
// 两个Vue 实例
var app = new Vue({
el: '#app',
data: {
msg: ''
}
})
var app2 = new Vue({
el: '#app2',
data: {
msg: ''
}
})
script>
项目安装Element
安装vue编程框架：npm install -g @vue/cli @vue/cli-init
创建一个项目：vue init webpack myapp
vue init webpack my-project 安装项目
- Project name：项目名
- Project description: 项目描述
- Author: 作者
- Vue build：
- 第一种：配合大部分的开发人员
- 第二种：仅仅中有runtime
- Install vue-router? 是否安装vue-router
- Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
- Pick an ESLint preser:使用哪种语法规范来检查我们的代码：
- Standard: 标准规范
- Airbnb: 爱彼迎规范
- Set up unit test: 设置单元测试
- Setup e2e tests： 设置端对端测试
- Should we run ‘npm install’:要不要帮忙你下载这个项目需要的第三方包
- 使用npm来下载
- 使用yarn来下载
运行：npm run dev
npm i element-ui -S
安装网络请求axios
安装：npm install axios（或者直接下载https://github.com/axios/axios）
vue编程代码
this.$myHttp.post(‘http://www.lda.com/api/v1/admin/login’,this.ruleForm,{
‘Content-Type’: ‘application/x-www-form-urlencoded’
}).then(backdata=>{ // 异步执行成功后
if(backdata.data.mid == ‘0’){
this.$message.error(backdata.data.return);
}
if(backdata.data.mid == ‘1’){
window.localStorage.setItem(‘token’,backdata.data.username);
this.$router.push({name:‘home’});
}
});
路由
https://router.vuejs.org/zh/guide/#html看文档
import Router from ‘vue-router’
import Home from ‘@/components/Home’
import Homes from ‘@/components/Homes’
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
children:[
path: ‘/homes’,
name: 'homes',
component: Homes,
] //子路由
])
路由另外一种写法
使用一个匿名函数, 返回导入的对象
routes: [
route("/login",'/Login',"Login"),// /login路径，路由到登录组件
{
path:"/", // 根路径，路由到 Layout组件
component: () => import('../pages/Layout'),
redirect:"/index/dashboard",
children:[ // 其它所有组件都是 Layout的子组件
route("/index/dashboard","/Dashboard","Dashboard"),
route("/item/category",'/item/Category',"Category"),
route("/item/brand",'/item/Brand',"Brand"),
route("/item/list",'/item/Goods',"Goods"),
route("/item/specification",'/item/Specification',"Specification"),
]
}
]
使用ES6的语法, 进一步简化为:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlQXXUgG-1670133556426)(.\image-20200804103558391.png)]
Vuetify
安装
npm install -g @vue/cli @vue/cli-init`
vue init webpack myapp
vue init webpack my-project 安装项目
-
Project name：项目名
-
Project description: 项目描述
-
Author: 作者
-
Vue build：
- 第一种：配合大部分的开发人员
- 第二种：仅仅中有runtime
-
Install vue-router? 是否安装vue-router
-
Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
-
Pick an ESLint preser:使用哪种语法规范来检查我们的代码：
- Standard: 标准规范
- Airbnb: 爱彼迎规范
-
Set up unit test: 设置单元测试
-
Setup e2e tests： 设置端对端测试
-
Should we run ‘npm install’:要不要帮忙你下载这个项目需要的第三方包
-
使用npm来下载
-
使用yarn来下载
-
安装vuetify
npm install vuetify --save
安装后看官方文档导入
一、安装
文件plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
二、安装
main.js文件导入css和vuetify
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import vuetify from ‘@/plugins/vuetify’
Vue.config.productionTip = false
new Vue({
el: ‘#app’,
router,
vuetify,
components: { App },
template: ‘’
})
css生效包裹在
//…
路由s6写法
{
path: ‘/admin’,
name: ‘admin’,
component: () => import(‘@/components/admin/index’),
}
规划路由
<div id="app">
<div class="top">头部div>
<div class="container">
<div class="left">
<li><router-link to="/goods">商品管理router-link>li>
<li><router-link to="/user">用户管理router-link>li>
div>
<div class="main">
<router-view>router-view>
div>
div>
div>
-
router-link: 可以理解成
链接, to属性就是对应的路由 -
router-view: 一个占位符, 会被替换成组件的内容
-
-
左侧导航
:mini-variant=“miniVariant” :src=“bg” absolute dark > dense nav class=“py-0” > 方冠 零售平台 管理后台 大得 v-for=“item in items_list” :key=“item.title” > {{ item.icon }} v-for=“subItem in item.item” :key=“subItem.title” :to=“subItem.path” link > da {{ subItem.title }} v-for=“itemb in items” :key=“itemb.title” :to=“itemb.path” link > {{ itemb.icon }} {{ itemb.title }} GitHub的主页：https://github.com/surmon-china/vue-quill-editor Vue-Quill-Editor是一个基于Quill的富文本编辑器：[Quill的官网]( 安装：npm install vue-quill-editor --save 安装：npm install quill --save 显示富文本内容富文本
Vue-Quill-Editor
一、安装
二、局部引入
三、使用
安装网络请求axios封装
安装：npm install axios（或者直接下载https://github.com/axios/axios）
新建assets/js/http.js封装
import axios from ‘axios’;
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
baseURL: ‘http://www.lda.com/api/v1/’,
})
Vue.prototype.$myhttp = axios_obj;
}
export default myaxios;
main.js引入
import myaxios from ‘@/assets/js/http.js’
Vue.use(myaxios);
.vue文件使用
this.$myhttp.post(‘admin/login’,this.ruleForm,{
‘Content-Type’: ‘application/x-www-form-urlencoded’
}).then(backdata=>{ // 异步执行成功后
// this.$router.push({name:‘home’});
// console.log(backdata);
if(backdata.data.mid == ‘0’){
this.$message.error(backdata.data.return);
}
if(backdata.data.mid == ‘1’){
window.localStorage.setItem(‘token’,backdata.data.username);
this.$router.push({name:‘home’});
}
});
属于img图片遍历
要这样写item.img为接口数据
横线
路由跳转带参数
this.$router.push({name:‘useradd’,query: { id: e }});
获得路由url上的参数
console.log(this.$route.query.id);
iview
安装iview
npm install iview --save
配置maun.js
import iView from ‘iview’
import ‘iview/dist/styles/iview.css’
Vue.use(iView)
然后就可以使用了
克隆
1、点击
2、数据
formDynamic: {
items: [
{
value: ‘’
}
]
}
3、克隆
handleAdd () {
this.formDynamic.items.push({
value: ‘’
});
},
vue删除data数据
1、点击
2、数据
formDynamic: {
items: [
{
value: ‘’
},
{
value: ‘’
}
]
}
3、删除
handleRemove (item) {
console.log(item)
this.$delete(this.formDynamic.items,item);
console.log(this.formDynamic.items)
}
单选框
获得axios网络url
this.$myhttp.defaults.baseURL
城市三连动百度网盘php/citydatas.js文件
安装iview
使用
图片上传
上传
js部分
css部分
判断是不是在微信打开js
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
this.$Message.info('微信打开');
} else {
this.$Message.info('不是微信打开');
}
微信授权跳转
window.location.href = url;
网络请求加参数axios
安装axios
npm install axio
新建http.js
import axios from 'axios';
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
baseURL: 'http://www.dadesa.com:8080',
})
function onGetCall(config) {
return config.method === 'get';
}
axios_obj.interceptors.request.use(function (config) {
var urlsa = config.url;
var t = Date.parse(new Date()) / 1000;//时间戳
if(urlsa.indexOf("?") != -1 ){
config.url = config.url + "&aaa="+t
}else{
config.url = config.url + "?aaa="+t
}
console.log(config.url);
// var t = Date.parse(new Date()) / 1000;//时间戳
// config.headers['Authorization'] = t
return config;
}, null, { runWhen: onGetCall });
Vue.prototype.$myhttp = axios_obj;
}
export default myaxios;
main.js引入
import myaxios from '@/assets/js/http.js'
Vue.use(myaxios);
跳转
this.$router.push({path:'/testDemo',query:{setid:123456}});
watch: {
'$route' (to, from) { //监听路由是否变化
//加载项目
if(to.path == "/pindex/Allocation"){
this.id = this.$route.query.id;
console.log(this.id);
this.$myhttp.get('admin/examine?id=1'+id,{
'Content-Type': 'application/json'
}).then(backdata=>{ // 异步执行成功后
this.desserts = backdata.data[0];
this.total = backdata.data[1];
this.page = backdata.data[2];
});
}
}
},
监听数组理的数据改变
数组
dades:{id:'',name:'',type:'',}
监听
watch: {
'dades.type'(val){
console.log(val);
}
}
拦载请求发送前后
import axios from 'axios';
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
baseURL: 'http://www.dadesa.com:8080',
})
function onGetCall(config) {
return config.method === 'get';
}
//发送请求前拦载
axios_obj.interceptors.request.use(function (config) {
var urlsa = config.url;
var t = Date.parse(new Date()) / 1000;//时间戳
var login = window.localStorage.getItem('login');
if(urlsa.indexOf("?") != -1 ){
config.url = config.url + "&datest="+t+"&login_name="+login
}else{
config.url = config.url + "?datest="+t+"&login_name="+login
}
return config;
}, null, { runWhen: onGetCall });
// //发送请求返回拦载
axios_obj.interceptors.response.use(function (response) {
// 对响应数据做点什么
var data = response.data;
if(data == 206){
alert('没有操作权限');
window.localStorage.clear('login');
location.reload();//刷新
return false;
}
return response;
},
// function (error) {
// // 对响应错误做点什么
// return Promise.reject(error);
// }
);
Vue.prototype.$myhttp = axios_obj;
}
export default myaxios;
懒加载树Element
axios的post请求obj数据转formdata
import axios from 'axios';
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
//支付接口
baseURL: 'http://www.dade.com:9000',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers:{'Content-Type': 'application/x-www-form-urlencoded'}
})
// axios_obj.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$payhttp = axios_obj;
}
export default myaxios;