
Vue
手把手入门
一百万种可能~
展开
-
vue传数组参数给java后端
设置数据格式为时间戳:value-format="timestamp"axios数组序列化请求参数:paramsSerializer。设置空间类型:type="datetimerange"四、MyBatis / MySQL处理查询格式。前景:在开发过程中使用elementUI组件。二、JS / VUE 数据传输。三、后端实体类接收请求参数。控件的时间戳格式是13位的。原创 2023-01-09 14:06:53 · 2682 阅读 · 0 评论 -
vue:v-model实现子组件和父组件数据双向绑定
/组件初始化时,将父组件数据保存到子组件数据中。二、子组件 pic-upload.vue。//监听子组件数据变化。//监听父组件数据变化。原创 2022-11-17 15:03:38 · 1439 阅读 · 0 评论 -
vue:Video.js 快速整合
一、安装包二、main.js引入包Vue.prototype.$video = Video // 在vue的原生里添加了Video这个标签,增强了vue的功能性三、使用class="自定义"到这就可以播放了。原创 2022-11-17 11:36:34 · 1164 阅读 · 0 评论 -
vue:vue-video-player(m3u8)视频播放组件Uncaught TypeError: Object(...) is not a function at Module.eval
异常一、Uncaught TypeError: Object(...) is not a function at Module.eval (webpack-internal:///./node_mod。aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。src: 'https://xxx.cn/xxx/66857842800316666666.mp4'//url地址。// src: "" //url地址。poster: "", //你的封面地址。原创 2022-11-17 09:20:02 · 1911 阅读 · 2 评论 -
微信小程序:(异常)Expected BEGIN_OBJECT but was STRING at line 1 column 1 path $ 解决方案和分析流程(这里一定有你要的答案)
帮忙解决问题收点费没意见吧,知识创造财富。。。这里一定有你要的答案环境:后端(Java+WXJava)、前端(uniapp+原生都可以)场景:小程序使用手机号登录,出现报错:(Expected BEGIN_OBJECT but was STRING at line 1 column 1 path $ )解决方法:先调用wx.login,然后再点击获取手机号的按钮。(注:先公布答案,想要深入了解的可以继续往下看) 异常分析:问题出在后端,先debug后端代码发现获取微信服务器的sessionKey正原创 2022-06-08 14:08:58 · 4727 阅读 · 1 评论 -
微信小程序:Error: components/XXX.bak.js does not exists
开发环境:vue+uniapp突然遇到这样的错误,死命修改代码都没问题啊,后来删除unpackage 文件,重新编译后正常原创 2022-03-24 18:28:55 · 2818 阅读 · 3 评论 -
h5如何唤起地图App(vue+腾讯地图)
一、创建腾讯地图的key地址:腾讯位置服务 - 立足生态,连接未来二、腾讯地图文档url接口:URI API(地图调起) | 腾讯位置服务注:特别注意灰色部位,弄错了就多整好几个小时(瞎几把整个灰色的)三、a标签调用就完了https://apis.map.qq.com/uri/v1/geocoder?coord=23.82358,118.3139&referer=XXX...原创 2022-03-10 20:39:05 · 2762 阅读 · 0 评论 -
vue+uniapp:uView事件怎么用
在uView文档中的事件,没有具体的示例,如:这边记录一下用法<u-popup v-model="show" @close="closePopup">原创 2022-02-26 15:28:33 · 765 阅读 · 0 评论 -
uniapp:小程序全局分享
一、二、三、算了 直接传送门吧https://blog.youkuaiyun.com/weixin_44694538/article/details/108727969原创 2022-01-16 17:28:04 · 232 阅读 · 0 评论 -
vue:添加项目名(开发环境)
一、首先在全局配置文件中添加项目名(任意js文件)二 、vue.config.js 文件中引入项目名import defaultSettings from '../../src/settings.js'三、routers.js 文件中引入项目名import defaultSettings from '../../src/settings.js'...原创 2022-01-05 17:56:10 · 2748 阅读 · 0 评论 -
vue+uniapp:打包部署h5(公众号h5)
一、如果你是刚加载的项目需要重新获取DCloud appid(DCloud 应用的唯一标识)二、发行三、发行原创 2021-12-27 22:58:55 · 1615 阅读 · 0 评论 -
三种解决方法:Cannot deserialize value of type `java.util.Date` from String
一、改前端加入格式化:value-format="yyyy-MM-dd HH:mm:ss"<el-date-picker v-model="formValidate.pastDueTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" ..原创 2021-12-11 19:48:31 · 53876 阅读 · 4 评论 -
前端:base64转FormData对象
方法一:亲测可用var base64String = /*base64图片串*/; //这里对base64串进行操作,去掉url头,并转换为bytevar bytes = window.atob(base64String.split(',')[1]);var array = [];for(var i = 0; i < bytes.length; i++){ array.push(bytes.charCodeAt(i));}var blob = new Blob([new原创 2021-11-01 15:16:35 · 3819 阅读 · 0 评论 -
vue:手写一个单选框/多选框
一、效果:二、代码:<template> <div> <div id="main"> <h1>多选</h1> <div class="wrap"> <input type="checkbox" name="1" id="item1" /> <label for="item1"> <div cla.原创 2021-09-13 19:03:23 · 1003 阅读 · 0 评论 -
vue:销毁定时器(离开A页面是销毁A的定时器)
一、创建定时器this.messageListTimer = setInterval(() => { this.initMessageList(0); }, 5000);二、离开页面时销毁props: {},beforeDestroy(){ console.log("销毁定时器"); clearInterval(this.messageListTimer);},methods: {}...原创 2021-09-13 15:29:25 · 1898 阅读 · 0 评论 -
vue:获取协议、域名、环境
一、协议和域名都是原生的location.protocol+'//' + location.host二、获取vue的环境const baseUrl = process.env.VUE_APP_BASE_API; // /dev-api原创 2021-09-10 18:08:21 · 4582 阅读 · 0 评论 -
js、jQuery、vue:作用域
下面这种情况 this无法使用,必须把this重新赋值if (res.code === 10000) { this.middleChart=res.result; let ss = this; this.middleChart.forEach(function(element) { console.log(this.middleChart); //报错 console.log原创 2021-09-06 12:24:31 · 111 阅读 · 0 评论 -
vue:ant-g2渲染图表时出现累增(追加)
问题:问题标签代码:<div id="divId"></div>解决方法:方法一、使用js原生方法,直接清空div标签的内容document.getElementById('divId').innerHTML = '' ;方法二:我还没想出来原创 2021-09-06 11:17:27 · 560 阅读 · 0 评论 -
vue:antV G2在vue中的使用(阿里图表,类似echarts)
效果比echarts好看官方文档:https://g2.antv.vision/zh/docs/manual/getting-started转载来源:https://www.jianshu.com/p/a836ae8aeeb7一、安装npm install @antv/g2 --save本人下面这个也安装了npm install --save @antv/data-set二、引入import G2 from '@antv/g2'; //..原创 2021-09-01 17:28:59 · 3423 阅读 · 2 评论 -
vue:$emit失效
首先,这个问题很鬼畜,有说不能用驼峰的,这个我没遇到过然后,我知道大家跟我一样很仔细的在排错,但是麻烦大家再仔细一点儿因为我的这个错误是标点符号没有注意(特别父组件中,回调是@符号不是:)...原创 2021-08-18 16:46:35 · 2347 阅读 · 2 评论 -
vue-element:实现微信表情
一、创建emotion.json文件夹(以下字符是按照微信官方来定义的)[ "[微笑]", "[撇嘴]", "[色]", "[发呆]", "[得意]", "[流泪]", "[害羞]", "[闭嘴]", "[睡]", "[大哭]", "[尴尬]", "[发怒]", "[调皮]", "[呲牙]", "[惊讶]", "[难过]", "[酷]", "[冷汗]", "[抓狂]", "[吐]", "[偷笑]", "[可爱]",原创 2021-07-29 13:42:42 · 1176 阅读 · 4 评论 -
css:设置滚动条样式&高度自适应
一、如何出现滚动条在样式中添加 overflow-y: scroll;二、修改滚动条样式2.1、首先在标签中定义一个class名<div class="scroll">2.2、设置样式/*滚动条大小*/ .scroll::-webkit-scrollbar{ width:5px; height:10px; } /*正常情况下滑块的样式*/ .scroll::-webkit-scrollbar-thumb{ backgr.原创 2021-05-17 17:34:16 · 10051 阅读 · 0 评论 -
vue:图片加载失败(此图片来自微信公众平台未经允许不可引用)
一、这个问题并不是微信配置的原因,而是meta没有定义二、复现:图片加载不出来三、错误排查:然后将图片地址放在360和Google中访问,第一次打开提示:此图片来自微信公众平台未经允许不可引用第二次按F5刷新页面可以正常显示四、解决方法(vue为例):在代码中添加 <meta name="referrer" content="no-referrer"> 标签即可,html文件等效作用no-referrer:所有请求不发送 refer...原创 2021-07-23 15:13:55 · 2383 阅读 · 0 评论 -
vue&js:concat不生效
一、看别人的都写的好好的能够赋值,为什么我的数组长度是0呢var arr = [`大漠`,'30','W3cplus'];console.log(arr); // ["大漠", "30", "W3cplus"]var arr2 = arr.concat('Blog','2014');console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]二、解决方案看上面的例子我们会发现var arr2 =这个地方就是关键了我..原创 2021-07-20 10:55:21 · 2968 阅读 · 0 评论 -
vue:父子组件之间的传值、props v-model修改
一、父子组件传值父组件:1、引入子组件<EditDialog :modalDialog="addTagModal" dialogTitle="新增" :currOperation="true" @cancelModal="cancelModal"/>//modalDialog dialogTitle currOperation 传的值//@cancelModal 回调函数子组件:1、接收传输和使用props: { tagId: { type..原创 2021-07-15 18:07:17 · 487 阅读 · 0 评论 -
html:自定义遮罩层弹窗(居中)
一、html代码html<div v-if="maskVisible" class="mask_layer"> <div class="dialog_div"> <div style="display: flex; justify-content: center; align-items: center;width: 100%;height: 100%;"> 内容 </div> </div&.原创 2021-07-15 17:04:23 · 1096 阅读 · 0 评论 -
vue:深拷贝、复制对象(背景:修改vuex中的值出现异常)
一、问题// 原来的代码var official = this.nowOfficial;修改official的值时,出现nowOfficial的值也被修改了,原因:以上写法,两个对象指向同一个地址(一个东西,两个名字)二、分析当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下数组:var a = [1,2,3]; var b = a; b.push(4); // b中添加了原创 2021-07-05 17:56:59 · 896 阅读 · 0 评论 -
vue+js+jquery:常用的方法
一、获取number类型长度方法一:调用toString方法转为字符串后取长度var num = 123;alert(num.toString().length);方法二:隐式转字符串后取长度var num = 123;alert((num + ‘’).length)二、判断对象是否为空if(JSON.stringify(official) === '{}'){ }...原创 2021-07-01 15:14:38 · 260 阅读 · 0 评论 -
vue:处理时间 Moment.js
官方文档:http://momentjs.cn/docs/优秀的文档:https://blog.youkuaiyun.com/qq_38933412/article/details/82879127一、安装npm install moment二、引入import moment from 'moment';三、示例/** * 将时间戳转换为需要的时间类型 * @param timestamp 要处理的时间戳 * @returns {string|*} */expor原创 2021-07-01 15:08:55 · 194 阅读 · 0 评论 -
vuex:vuex取值undefined、vue监听器、以及监听失效(数据没有改变的问题)
一、取值undefined网上很多都是直接取值的:this.$store.state.全局变量名称但是具体问题具体分析嘛!看看vuex里面是怎么定义的原来这个参数用了getters那我们就懂了 this.$store.getters.全局变量名称才是正确的二、监听先贴代码吧,为我还不能肯定这个能用 import { mapGetters } from 'vuex' export default { name: "", compu...原创 2021-06-09 18:41:29 · 3568 阅读 · 0 评论 -
vue:监听屏幕宽度
mounted() { const that = this; window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth; console.log(this.screenWidth); that.screenWidth = window.screenWidth; .转载 2021-06-08 11:46:39 · 2271 阅读 · 2 评论 -
vue-element:实现emoji表情
参考这篇文章:https://blog.youkuaiyun.com/qq_40340478/article/details/106579577一、下载emoji表情文件链接:https://pan.baidu.com/s/1qy-avxcK5_yX8hCkPMzxQw提取码:hl3f二、标签<a href="javascript:void(0);" v-for="(item, index) in faceList" @click="getEmo(index)" ...原创 2021-05-20 14:38:32 · 935 阅读 · 0 评论 -
vue-element:修改radio-button(单选框按钮)的样式
一、设置宽度(由于无法直接设置span的宽度)<el-radio-button label="上海">这里有input和span标签</el-radio-button>二、所以可以再标签中添加一个div,只需要控制div的宽度了<el-radio-button label="文本"> <div class="el_radio_button_div">文本</div></el-radio-button>.原创 2021-05-19 12:17:21 · 6731 阅读 · 0 评论 -
vue-element:学习笔记
链接:https://pan.baidu.com/s/1EySJFMD7iYzZiMgKFP6B5g提取码:4lfj复制这段内容后打开百度网盘手机App,操作更方便哦准备工作1、接口项目地址:https://gitee.com/wBekvam/vueShop-api-server启动项目 安装依赖: npm install 启动项目 :node app.js如何引入idea:https://blog.youkuaiyun.com/qq_16946803/article/deta...原创 2021-05-03 16:24:14 · 520 阅读 · 0 评论 -
vue学习笔记
百度网盘:链接:https://pan.baidu.com/s/1mcphFpMPcrUUr8Rgrz2Caw 提取码:rckdVue.js 目录结构 2、必须实例化Vue<script>new Vue({ el: '#app', data:{ use: false } }); </script>3、插值表达式 {{ message }}4、指令 <div v-html="message">渲染v-bind指令true fal...原创 2021-05-03 16:17:12 · 198 阅读 · 0 评论 -
vue+uniapp:小程序H5使用图表组件(uCharts)
一、打开组件网站:https://ext.dcloud.net.cn/plugin?id=271二、导入组件到项目三、这样图表组件就在项目中了(必须在根目录?)四、使用 4.1:打开图表组件生成工具网站:https://demo.ucharts.cn 4.2: 4.3:把使用demo中的数据放到代码中即可(有很多配置)五:注意事项: 5.1:这两个是对应的...原创 2021-04-28 19:39:47 · 1859 阅读 · 6 评论 -
vue+uniapp:switch开关无法动态修改问题(一开始以为是vuex的问题)
这个开关搞到吐血了:因为vuex动态修改经常出现这种赋值失效问题(数据更新,页面没有渲染),一开始以为是vuex没有渲染,<switch :checked="notify" :color="fontColor" @change="getSubscribe"></switch>翻阅了各种文档,还有各种百度都没有解决问题o(╥﹏╥)o后来测试了下发现上图中值是正确的,开关不正常,于是放弃了uniapp(或colorui)中原生的switch,改用uview的 u-s原创 2021-04-12 13:07:06 · 3459 阅读 · 13 评论 -
微信小程序五:(uniapp)订阅消息
示例:一、二、小程序调用uni.requestSubscribeMessage({ tmplIds: tmplIds,//数组(后台获取的) success:(res)=>{ console.log(res[tmplIds[0]]);//值包括'accept':同意、'reject':拒绝、'ban':后台禁用 }, fail:(err)=>{ }})三、遇到的一些问题调用失败fail返回提示及解决方式:1.errM...原创 2021-04-02 14:42:26 · 3653 阅读 · 1 评论 -
vue+uniapp:全局组件(easycom)
一、创建组件https://my.oschina.net/u/4397787/blog/3309273原创 2021-04-02 11:14:27 · 1079 阅读 · 0 评论 -
vue:给对象追加值
Vue.set(对象名, '属性名', 属性值)Vue.set(res, 'aa', 0)原创 2021-03-24 19:11:27 · 1860 阅读 · 0 评论