vue
文章平均质量分 67
姚辉乾
Vue前端工程师
展开
-
Vue相关API盘点
数据相关APIVue.set向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。使用方法:vue.set(target, propertyName/index, value)范例:批量设置商品价格<template><!--添加批量价格更新--><p><i nput v-model.number="pri ce">vbutton @click="batchupdate"> 批量更新价格 </bu原创 2021-08-11 09:55:46 · 447 阅读 · 0 评论 -
Vue组件化的理解
组件化是Vue的精髓,Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多.当面试时 被问到:谈一下你对Vue组件化的理解。这时候有可能无从下手,可以从以下几点进行阐述:定义:组件是可复用的Vue实例,准确讲它们是V ueComponent的实例,继承自Vue。 优点:从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性。 使用场景:什么时候使用组件?以下分类可作为参考:通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局...原创 2021-08-09 16:14:01 · 746 阅读 · 1 评论 -
即时通讯 emj.js文件
export const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'export const emojiMap = { '[NO]': 'emoji_0@2x.png', '[OK]': 'emoji_1@2x.png', '[下雨]': 'emoji_2@2x.png', '[么么哒]': 'emoji_3@2x.png', '[乒乓]': 'emoji_4@2x.png', '[便便]'.原创 2020-11-30 14:10:19 · 1436 阅读 · 0 评论 -
vue css刻度尺找到对应节点
vue css刻度尺找到对应节点<template> <div class="a"> <div class="b"> <div class="b1"> <div class="b2" v-for="(item,index) in list" :key="index"> <span class="b22">{{item.nam.原创 2020-06-29 17:31:25 · 1174 阅读 · 1 评论 -
vue 客服腾讯云即时通讯IM 小demo
第一步 按照即时通讯IM文档来安装第二步在main.js 引入第三步 找一个空页面粘贴过去就可以了具体效果图:业务逻辑代码如下:<template> <div class="box" v-loading="loading"> <div class="t_left"> <div class="seek"> <el-input placeho...原创 2020-06-28 19:00:04 · 3564 阅读 · 33 评论 -
VUE移动端浏览器分享事件(微信,QQ,新浪微博)NativeShare.js
先看一下效果图:点击右上角的分享按钮,触发百度浏览器的分享事件,来实现分享。目前只支持UC浏览器 百度浏览器 等主流浏览器。使用NativeShare.js 来达到上述功能的实现如何在Vue中使用:第一步:安装依赖:npm installnativeshare第二步:在需要的vue组价或页面引入import NativeShare from 'nativeshare'第三步:在点击分享的地方创建方法:@click="onSelect()"第四步:在...原创 2020-05-18 15:40:21 · 4412 阅读 · 0 评论 -
vue支付宝pc支付的扫码支付和跳转支付两种支付方式
支付宝的PC支付 分为两种 前置模式支付 和 跳转模式支付前置模式和跳转模式,需要后台在支付宝的api中配置(无关前端)跳转模式。 前置模式是将二维码前置到商户 的订单确认页的模式。需要商户在 自己的页面中以 iframe 方式请求 支付宝页面。具体分为以下几种: 0:订单码-简约前置模式,对应 iframe 宽度不能小于600px,高度不能小于300px; 1:订单码-前置模式,对应iframe 宽度不能小于 300px,高度不能小于600px; 3:订单码-迷你前置模式,对应...原创 2020-05-12 10:29:45 · 11366 阅读 · 3 评论 -
H5 和 APP交互 h5调用app方法传参
今天遇到一个需求,是点击分享按钮,需要调用app的原生分享app那边写好了一个方法是onShare( )我们第一步就是点击分享好友触发第二步:onShare () { if(this.isAndroid_ios()) { console.log('安卓') window.local_obj.onShare('1') }else { console...原创 2020-04-10 18:10:44 · 4729 阅读 · 0 评论 -
js vue保留两位小数函数(0.00)格式
// 保留两位小数函数function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x*100)/100; var...原创 2020-04-06 17:06:21 · 3186 阅读 · 0 评论 -
vue渲染数据 给前三个和后三个的盒子 添加不同样式
:class="index>2&&Number(index+3)<ztlist.length?'qian':'qian redd'"原创 2020-01-29 23:03:00 · 1283 阅读 · 0 评论 -
vue订单倒计时
写一个组件代码<template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span></templat...原创 2020-01-07 16:20:51 · 1968 阅读 · 0 评论 -
VUE微信公众号签名错误 invalid signature 有时OK 有时报错
做项目的时候,需要用到微信的jsdk 但是有的时候可以wx.config是Ok的,有的时候是错误的有百分之90的几率是路径导致的,不要再去看是否签名错误了。路径这样获得:location.href.split('#')[0]才可以。我之前用的是location.href。这样反而会出现奇怪的bug。当时是一次就过,就没有发现错误。let urla = location...原创 2019-12-04 10:20:37 · 1198 阅读 · 0 评论 -
vue单页面,在微信公众号支付中遇到的URL未注册BUG解决方法
今天在做微信公众号支付的时候,遇到一个bug,在当前支付页面点击支付,就会报错,提示当前页面的URL未注册。如下图:但是,这个URL我们是在后台微信公众号配置了的,所以说不会出错。但是我们刷新一次当前页面,再点击立即充值就会成功。我就在里面写了一个刷新当前页面的方式,来进行支付。但是试了好几种刷新当前页面的方法,都不可以。在了解到,vue在微信里的刷新方式是不生效的。最终发现了...原创 2019-11-21 11:13:55 · 5216 阅读 · 2 评论 -
vue登录,滑动验证码
第一步:npm install --save vue-monoplasty-slide-verify第二步:main.js配置import Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);第三步:vue页面或组件:// template&...原创 2019-11-20 10:25:35 · 6529 阅读 · 2 评论 -
vue登录注册如何实现图像验证码
先来上图,看一下最终效果图公司的一个新项目,需要用到图形验证码进行判断。第一步:需要把identify放到所需要的组件里面,把下面的代码塞进去即可。<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="content...原创 2019-11-04 18:55:40 · 13759 阅读 · 2 评论 -
Vue的动态设置style 加过渡动画,不用V-show
<baidu-map class="map" :style="contentStyleObj" :center="center" :zoom="zoom" @ready="handler"></baidu-map>用:style来设置 contentStyleObj...原创 2019-04-01 10:40:58 · 5196 阅读 · 0 评论 -
js限制输入框字数,限制只能输入11位手机号
oninput="if(value.length>11)value=value.slice(0,11)"原创 2019-03-29 18:30:30 · 7025 阅读 · 0 评论 -
vue axios原生上传 用fromdata
直接放代码吧,看一遍就会了<template> <div class="upload"> <div class="uploadT"> <div> <img src="@/assets/imgs/public/wend.png"/> <input ref...原创 2019-03-29 16:43:27 · 563 阅读 · 0 评论 -
前端记住账号,记住密码用H5本地储存
设置:localStorage.setItem(user,value)获取:localStorage.user清除:localStorage.remove(user)原创 2019-03-18 10:27:03 · 1500 阅读 · 1 评论 -
input的accept
<inputtype="file"accept="image/*"capture="camera"><inputtype="file"accept="video/*"capture="camcorder"><inputtype="file"accept="audio/*"capture="microphone">第一个是只能拍照上传...原创 2019-04-22 09:46:43 · 643 阅读 · 0 评论 -
vue里面子组件调用父组件触发函数
用法: 子组件上定义ref="refName", 父组件的方法中用this.$refs.refName.method去调用子组件方法详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即 this.$refs.refName.然后再进行调用,也就是this.$refs.refName.method如下:子组件:...原创 2019-03-07 10:39:38 · 1548 阅读 · 0 评论 -
Vue监听窗口变化执行函数
mounted () { const that = this window.onresize = () => { return (() => { //这里写要操作的函数 window.screenWidth = docume...原创 2019-02-27 10:36:20 · 2242 阅读 · 0 评论 -
Vue 图片 三目require
<img @click="cosMo(a)" :src="cosemo.cosemoIm_c?'require(`@/assets/imgs/head/cose_a.png`)':require(`@/assets/imgs/head/cose_aa.png`)"/><img @click="cosMo(b)" :src="cosemo.cosemoIm_c?'require...原创 2019-03-01 11:27:15 · 2198 阅读 · 0 评论 -
微信小程序里面的图片自适应
微信小程序里面的img width:100%;height:auto;在微信小程序里面是不会显示的在mpvue里面 img 或者原生小程序 image 里面 mode='widthFix' 加入这个属性给图片一个宽度100% 图片就会自适应 例如下面的:<img mode='widthFix' :src="imgUrls.dimage" /><...原创 2019-08-13 11:20:30 · 453 阅读 · 0 评论 -
vue 渲染dom背景图片background url
<div class="shopImg" :style="{background:'url('+item.goodimage+')'}"></div>原创 2019-01-28 14:16:09 · 3786 阅读 · 0 评论 -
vue自动添加浏览器兼容前后缀
1.安装loader 安装postcss-loader 和 autoprefixer 下载: cnpm install postcss-loader autoprefixer --save-dev在webpack.config.js里面设置以下代码test:/\.css$/,use: ['style-loader','css-loader',{ lo...原创 2019-04-17 17:22:19 · 3885 阅读 · 0 评论 -
prototype挂载
原创 2019-04-23 11:08:35 · 478 阅读 · 0 评论 -
vue-video-player 如何for循环遍历多个视频options="playerOptions"
直接上代码,按照正常逻辑走,只能遍历一个。目前项目遇到这个问题,度娘很久没有找到,只能自己手动解决了上代码<div class="reply_con" v-for="(item,index) in reply" :key="index" ><video-player class="video-player-box ovideo" ref="vi...原创 2019-05-07 16:05:28 · 11099 阅读 · 6 评论 -
vue里面的v-bind三元表达式
<h2>v-bind</h2><h2 v-bind:class="g">V-bind demo</h2><h2 v-bind:class="{red:off}">接收判断条件</h2><h2 v-bind:class="{r,g}">{r:r,原创 2018-08-13 13:32:37 · 16247 阅读 · 0 评论 -
vue跨域proxytable
xios vue 反向代理跨域1.config 下面的index.js找到proxytable进行替换proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://www.dajiwuhui.com', //源地址 changeOrigin: true, //...原创 2019-10-11 17:44:57 · 359 阅读 · 0 评论 -
vue根据id进行排序,一行代码搞定
这是后台返回的数据这是升序self.shopList = data.data.content.list.sort( (pre, cur) => pre.id - cur.id);这是降序self.shopList = data.data.content.list.sort( (pre, cur) => cur.id - pre.i...原创 2019-10-09 15:19:43 · 2835 阅读 · 2 评论 -
js去掉json中重复的id 重新push新的对象属性
<script> let a = [ {id:1,name:1}, {id:2,name:2}, {id:3,name:3}, {id:4,name:4}, {id:5,name:5} ] let b = {id:3,name:...原创 2019-08-26 09:54:49 · 1415 阅读 · 0 评论 -
【VUE】vue-awesome-swiper 在vue中不自动轮播的.需要触发一下才自动轮播的问题
1.首先安装vue-awesome-swiper(安装前首先按照nodejs,vue)npm install vue-awesome-swiper --save2.在main.js中引入安装的依赖import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dis...原创 2019-06-11 14:30:13 · 4492 阅读 · 0 评论 -
js实时监听input框的字数变化
<textarea oninput="aa()" onpropertychange="aa()" maxlength="140" id="a"></textarea> <script> function aa(){ console.log(document.getEle...原创 2019-06-03 16:43:09 · 2481 阅读 · 0 评论 -
js去除base前缀,前几位
fmg.replace(/^data:image\/\w+;base64,/, "")fmg 就是去除前缀后的base64格式<template> <div class="info"> <div class="infoLive"> <div class="infoTop"> ...原创 2019-06-13 16:19:52 · 5342 阅读 · 0 评论 -
vue只渲染前几个数据
<ulid="example"><liv-for="(item,index)initems"v-if='index<2'>{{index}}-{{item.message}}</li></ul>原创 2019-06-06 17:14:51 · 5346 阅读 · 7 评论 -
vue多个列表点击一次选中,双击取消
遍历出data里面的数据 v-for给li加点击事件绑定class样式怎么控制样式的显示通过 class的控制v:bind:class={class:index==变量}下标和class变量是否相等控制truefalse代码:<div id="app"> <ul> ...原创 2019-05-24 11:02:50 · 2111 阅读 · 0 评论 -
Vue里面的div套用背景图片
<div class="image_con" :style="{backgroundImage:'url('+list_datas.image+')'}"></div>原创 2019-01-22 11:37:05 · 4628 阅读 · 0 评论 -
JS格式化Thu May 12 2017 08:00:00 GMT+0800 (中国标准时间)
<script type="text/javascript"> var date = new Date('Thu May 12 2017 08:00:00 GMT+0800 (中国标准时间)'); date_value=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ...转载 2019-01-03 11:24:13 · 7511 阅读 · 0 评论 -
获取Vuex的值
self.$store.state.logNum == 0原创 2019-01-10 14:01:09 · 5953 阅读 · 0 评论