分类：VUE

2020
10-10

解决vue请求接口第一次成功,第二次失败问题

使用vue去请求接口发现问题来了：我请求只能请求一次，然后在按按钮去请求的时候发现502（这个是接口定义的）502就是传了空的值过来这个是其中一种情况，还有别的情况你看了大可试试我这样的办法然后发现我前端代码没有问题，接口代码也没有问题data(){return{form:{old_password:'',new_password:'',confirm_password:''}}},就是把值在重新赋值回去就可以解决了this.$http.post('/api/use... 继续阅读 >

2020
10-10

如何区分vue中的v-show 与 v-if

1.v-show不管初始的条件是什么，元素总是会被渲染，并且只是简单的基于CSSdisplay:none或者display:block的属性进行切换。2.v-if会根据初始的条件（data里自己的定义的数据）来进行真正的渲染（组件真正的销毁和重建），如果条件为真，才会开始渲染条件块，如果条件为假，则不会渲染条件块。注意：v-if不要和v-for一起使用！当和v-for一起使用时，v-for的优先级比v-if更高，详见vue官网关于v-for的详细描述，为... 继续阅读 >

2020
10-10

Vue中登录验证成功后保存token,并每次请求携带并验证token操作

在vue中，可以用**Storage（sessionStorage，localStorage）**来存储token，也可以用vuex来存储（但要考虑页面刷新数据消失问题，可以在vuex用Storage），下面介绍用localStorage来存储：在登录请求成功后，会返回一个token值，用loaclStorage保存localStorage.setItem('token',res.data.token)在main.js中设置全局请求头和响应回来的判断//设置axios请求头加入tokenAxios.interceptors.request.use(config=>{if(config.push... 继续阅读 >

2020
10-10

Vue axios 跨域请求无法带上cookie的解决

在main.js设置//携带cookieaxios.defaults.withCredentials=true补充知识：VUEaxios请求跨域时没有带上cookie或者每次cookie都改变这两天用VUE写管理后端时，碰到一个奇葩问题：我本地使用dev配置开发的时候请求可以带上cookie信息 打包出来部署在服务器上请求就没带上cookie信息。然后自己慢慢排查，联合后端同事，排查这个cookie问题，前端也配置了axios.defaults.withCredentials=true;后端也配置了跨域cookie，... 继续阅读 >

2020
10-10

Vue filter 过滤器、以及在table中的使用介绍

使用方法：//双花括号中{{isActive|isActiveFitlter}}//在v-bind中<divv-bind:id="isActive|isActiveFitlter"></div>一、组件中定义本地Filterfilters:{isActiveFitlter:(value)=>{returnvalue===1?'激活':'冻结'}}二、创建Vue实例前定义全局过滤器Vue.filter('isActiveFitlter',(value)=>{returnvalue===1?'激活':'冻结'})newVue({//...})三、全局Filter1、自定义一个js文件，可以放在... 继续阅读 >

2020
10-10

VUE中setTimeout和setInterval自动销毁案例

在Vue的大型单页应用中，在某个路由下，经常会出现需要延迟执行（setTimeout)或者间隔之心（setInterval）的函数，但是每次在页面destroy之前，都必须手动清理掉。正常代码如下：beforeDestroy(){this._timer&&clearTimeout(this._timer);}但是如果一不小心，就会忘记，会造成意想不到的情况，那么有什么办法能避免这种情况吗？当然有，那就是重新写一个setTimeout的方法（或者干脆劫持window.setTimeout)。var_pageTimer=... 继续阅读 >

2020
10-10

vue a标签点击实现赋值方式

如下所示：v-for=“kfinkefu”functioncopy_fun(copy){//参数copy是要复制的文本内容上面的方法就可用了，亲测可用！补充知识：VUE给类似a标签加点击事件不跳转的问题VUE的@click事件修饰符运用：.prevent阻止默认行为<ahref="url"rel="externalnofollow"@click.prevent="myClick">点击</a>.stop阻止冒泡，只执行start不执行end<divid="app"@click="end"><inputtype="button"value="开始"@click.stop="start... 继续阅读 >

2020
10-10

VUE UPLOAD 通过ACTION返回上传结果操作

通过Upload的action方法返回不了结果，可以通过on-success方法中获取返回结果<Uploadaccept=".xls,.xlsx":action="uploadUrl":on-success="onSuccess":on-error="handleError":before-upload="beforeUpload"style="float:right"><Buttontype="primary"icon="ios-cloud-upload-outline">导入</Button></Upload>-----------------------------------------computed:{uploadUrl(){returnbaseUrl+"/I... 继续阅读 >

2020
10-10

vue中element 的upload组件发送请求给后端操作

1.用到了before-upload属性，用于在上传文件前的校验，并且发送请求给后端，传输格式进行文件流传输什么都不用设置，action属性随便设置，不能为空即可！在before-upload属性的方法中的代码如下：var_this=this;debugger;//varfiles=file.target.files[0];debugger;constisJPG=file.type==="image/jpeg";constisLt2M=file.size/1024/1024<2;if(!isJPG){this.$message.error("上传头像... 继续阅读 >

2020
10-10

vue单应用在ios系统中实现微信分享功能操作

表示是第一次使用vue做单应用显目，也是在逐渐的摸索中~更是各种踩坑，各种填坑，打算写博客么？是因为不想写笔记了，嗯嗯就是这么简单进入正题。刚开始做微信分享的这个功能的时候，脑补了官方文档微信JS-SDK说明文档基础的知识不多说了，反正多看文档总是没错的~在安卓系统上面分享是没出错的，但是在ios上面问题就来了，表示无限吐槽ios，但是吐槽归吐槽，问题总是该解决的—在网上百度了很多vue单应用在ios系统中实现微信分... 继续阅读 >

2020
10-10

vue 微信分享回调iOS和安卓回调出现错误的解决

产品需求：在微信内分享需要手动配置的分享地址、分享图片与内容描述，引导用户分享，并在微信分享成功回调内进行相应的操作。首先需要在项目中引入微信jsSDk包，然后通过接口获取后台签名。封装函数获取微信分享必填参数其中的jsApiList中填的是需要使用的微信分享js接口的列表，参数URL默认是location.href，即分享当前页面的URL。在需要分享的页面引入封装的函数然后通过wxShare方法将URL和配置的参数传入，link参数是分享出去... 继续阅读 >

2020
10-10

基于vue hash模式微信分享#号的解决

看代码吧~//问题描述在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？fromTimeline之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。//获取签名this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig",this.$qs.stringify({"url":window.location.href.split('#')[0]})).then((res)=>{//有人说要加转译encodeURIComponent... 继续阅读 >

2020
10-10

在项目vue中使用echarts的操作步骤

1.在组件中创建该模块<template><divid="testChart"></div></template>2.导入echarts前提是：已经在项目中配置过echarts在<script></script>中导入echarts<script>import{echartInit}from"../../../utils/echartUtils"</script>3.初始化该模块exportdefault{name:'Test',//vue该组件名称Test.vuemounted(){this.testChart=echartInit('testChart');//初始化该echarts表/*this.testChart.setOption(thi... 继续阅读 >

2020
10-10

解决vue加scoped后就无法修改vant的UI组件的样式问题

有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。解决方法：使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件<stylescoped>.a>>>.b{/*...*/}</style>以上的代码会编译成：.a[data-v-f3f3eg9].b{/*...*/}注意：如果你使用了Less或Sass等预处理器，可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合-... 继续阅读 >

2020
10-10

vue 修改 data 数据问题并实时显示操作

首先，定义一个变量：（以下以本人写的为例）首先定义一个变量：然后，给变量赋值：如果想要修改数据，主要代码如下:然后界面上要记得绑定数据id:就Ok了。补充知识：vuedata中数组以及对象属性改变时不能及时反馈到视图中问题的解决方式1.vue对数组更新检测的机制又很明确的说明：变异方法：Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reverse()2.... 继续阅读 >

2020
10-10

vue 动态组件(component :is) 和 dom元素限制(is)用法说明

一、is的使用参考Vue2.0教程，有讲到is的使用：解析DOM模板时的注意事项有些HTML元素，诸如<ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如<li>、<tr>和<option>，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：<table><blog-post-row></blog-post-row></table>这个自定义组件<blog-post-row>会被作为无效的内容... 继续阅读 >