吴维炜
Q: 有多少程序员会去更换灯泡?
A: 没有,那是硬件问题。
Q:为什么程序员总是把圣诞节与万圣夜搞混?
A:因为 DEC 25 = OCT 31
展开
-
「Vue2架构」Vue2实现区域预览和打印功能
Vue2实现区域预览和打印功能。原创 2023-02-22 16:52:34 · 467 阅读 · 0 评论 -
「VUE架构」vue完美监听input值变
一、正则过滤场景:不能输入中文(3字节)或全角标点符号(2字节) 只能使用英文(大小写)数字,或者少数符号,符号应该不包含&'"\等JS/HTML里面可能产生意外的符号.也不该包含ASCII码0-31的控制字符二、决异步请求可能会发⽣先请求后返回问题,导致结果列表不是预料展⽰的效果假如300ms的延迟,服务器还是可能存在先发送的请求后返回。避免先请求后返回问题,确保以当前输⼊的值为参数给结果表赋值,可以在请求⾥做判断。当请求返回结果时,判断请求的参数和当前输⼊框的值相等,才进⾏相关操作三、实时..原创 2022-06-08 10:15:46 · 2274 阅读 · 0 评论 -
「VUE架构」Element Plus CDN时间选择器英文转中文
本文主要介绍Element Plus时间选择器如何把英文转中文直接上代码<link rel="stylesheet" href="element-plus@1.0.2/index.css"><script src="element-plus@1.0.2/index.js"></script><script src="element-plus@1.0.2/element_plus_es.js"></script><script s.原创 2022-04-21 11:34:54 · 399 阅读 · 0 评论 -
「VUE架构」Vue生成二维码
本文主要介绍vue生成二维码一、qrcode1.1效果图npm install --save qrcodejs21.2关键代码<template> <div class="qrcode" ref="qrCodeUrl"></div></template><script>import QRCode from 'qrcodejs2'export default { name: "Index", data() { .原创 2021-04-28 14:37:54 · 1504 阅读 · 15 评论 -
JS监听滚动id自动定位滚动
本文主要介绍原生JS进行滚动监听和id定位滚动,与效果锚点类似,适用于vue。关键性代码如下:var scroll = document.documentElement.scrollTop || document.body.scrollTop; //获取屏幕距离顶部的距离.js // 下述方法是引入mui+vue的案例 ,展示代码为methods里面的方法init:f...原创 2018-08-28 11:37:56 · 2396 阅读 · 0 评论 -
「VUE架构」vue 实现购物车列表右滑删除功能
本文主要实现购物车列表右滑删除功能。一、购物车页面cart.vue侧滑按钮宽度0.6rem,如果需要体验感好点的可以加个动画属性。<template> <div> <nav-header :showBackBtn="false" @handleBtnClick="goList('searchList')"> <span slot="title">购物车</span> </nav-header>.原创 2021-01-06 16:53:49 · 803 阅读 · 0 评论 -
VUE 移动端监听鼠标滑动和点击事件,重置页面用户未操作超时时间
本文主要介绍VUE移动端监听鼠标滑动事件,模拟实现用户在规定事件内无操作自动退出的场景。App.vue文件<template> <div id="app" @mousemove="moveEvent" @click="moveEvent"> <keep-alive> <router-view v-if="$route.meta.keepalive" /> </keep-alive> <route.原创 2020-12-17 16:22:16 · 3744 阅读 · 8 评论 -
「VUE架构」Vue2.0 通过监听路由变化给父级路由菜单添加active样式
本文主要介绍Vue通过watch监听路由变化,设置active高亮。1.设置父子路由在router文件下的index.js 关键代码routes: [ { path: '/', component: resolve => (require(["@/pages/Index"], resolve)), children: [ ......原创 2019-11-28 10:09:11 · 1408 阅读 · 1 评论 -
「VUE架构」Vue监听滚动事件响应索引及滚动距离锚点的控制
本文主要介绍vue当前页面滚动时,索引的自动切换及滚动距离锚点的控制。同时也解决了vue切换路由后上一个页面监听scroll滚动事件会在新页面报错问题。一、直接上逻辑代码,DOM页面和样式不在一一赘述。var doTop, // 距离顶部的距离 noScroll = false; // 是否在滚动的判断 mounted() { this.$nextTick(() ......原创 2019-05-16 11:27:47 · 2318 阅读 · 0 评论 -
「VUE架构」VUE2.0 stylus封装loading加载过渡组件
本文主要介绍如何封装loading加载过渡组件,本文的样式使用的stylus的写法 1.在对应的公共组件目录下,创建loading.vue(如果没有安装stylus,请现在package.json配置一下后重启服务) 对应的代码如下:&amp;lt;template&amp;gt; &amp;lt;div class=&quot;loading&quot;&amp;gt; &a...原创 2018-06-12 11:10:07 · 842 阅读 · 0 评论 -
「VUE架构」VUE2.0 图片懒加载vue-lazyload
本文主要介绍图片懒加载vue-lazyload的使用1.第一步,安装vue-lazyload 打开package.json,找到dependencies如下:"dependencies": { "vue-lazyload": "^1.2.4" },安装并重启服务npm installnpm run dev2.第二步,引入vue-lazyload并调用 ......原创 2018-06-12 10:59:03 · 2070 阅读 · 2 评论 -
「VUE架构」VUE2.0 better-scroll封装滚动组件
本文主要介绍better-scroll组件的引入,以及封装组件的使用。还用到了父子组件的特性。better-scroll文档 1.引入better-scroll 打开packgae.json&gt;dependencies 建议better-scroll使用^0.1.15版本,不然轮播可能出一些小问题。"dependencies": { "better-scroll"......原创 2018-06-11 09:56:59 · 10254 阅读 · 4 评论 -
「VUE架构」VUE2.0 Axios深入浅出
本文主要解决一下几个问题: 1.app.get is not a function解决方案(vue1.0升级到vue2.0的bug) 2.没有dev-server.js文件,如何进行后台数据模拟? 3.axios如何直接跨域mock网站的返回值一、基本配置 1.安装axios 配置package.json>dependencies 输入:"depende......原创 2018-06-08 16:56:32 · 725 阅读 · 0 评论 -
「VUE架构」VUE2.0 父组件传值子组件
本文主要介绍VUE2.0父组件像子组件传值1.首先父组件要引入子组件,然后通过传值:data=data的形式传参,其中第一个data表示子组件接收的数组名,可以是字符串、布尔值、JSON对象等形式,第二个data则是父组件的对象参数。(data不是唯一,可以自定义,下文案例用food表示) 引入子组件JS关键代码如下:<script> import CartC......原创 2018-05-29 11:21:06 · 1109 阅读 · 0 评论 -
「VUE架构」VUE2.0 图片上传功能(移动端)
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。效果图如下: 1.DOM代码1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)......原创 2018-05-25 14:03:44 · 27074 阅读 · 35 评论 -
VUE2.0之Jsonp的使用方法(前端)
本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据。1.JSONP的用途和原理使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再...原创 2018-05-22 14:16:44 · 29772 阅读 · 1 评论 -
「VUE架构」Vue2.0 子组件传值父组件
本文主要介绍Vue子组件像父组件传值一、通过事件触发子组件,将参数传递给父组件 1.子组件页面DOM部分 Header.vue<div class="detail-close" @click="hideDetail"> <i class="icon-close"></i></div>注:重点是@c...原创 2018-04-09 18:49:09 · 535 阅读 · 0 评论 -
「VUE架构」vue2.0 router 传递参数
本文主要介绍VUE2.0参数的传递与接收一、传参this.$route.push({path:'/xxx',query:{id:1}});//类似get传参,通过URL传递参数this.$route.push({path:'/xxx',params:{id:1}});//类似post传参二、接收 mounted(){ this.$route.......原创 2018-03-24 22:46:07 · 1176 阅读 · 2 评论 -
「VUE架构」vue-axios跨域问题
VUE2.0的 axios 在实际接口调用中常常会遇到跨域问题。一下简单介绍了如何解决跨域问题。1.首先你的axios要安装成功,具体的请参考 http://blog.csdn.net/qq_38209578/article/details/79225698 2.通过编辑器(IDE)打开你的项目>进入config>index.js 在dev下的proxyTable内输......原创 2018-03-08 13:46:05 · 1347 阅读 · 0 评论 -
「VUE架构」Vue2.0插件之一:使用vue-router插件
本文只要介绍vue-router基本用法与常见的问题一、vue-router插件的安装使用 npm:$ cnpm install vue-router二、vue-router插件的引用出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:用ide打开项目文件,在src目录下创建文件夹router,后在文件夹内创......原创 2018-02-01 13:39:55 · 2919 阅读 · 3 评论 -
「VUE架构」Vue2.0插件之二:使用vue-resource插件
本文只要介绍vue-resource基本用法与常见的问题一、vue-resource插件的安装使用 npm:$ cnpm install vue-resource二、vue-resource插件的引用出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:用ide打开项目文件,在src目录下创建文件夹resource,后在文件夹内...原创 2018-02-01 13:53:40 · 19689 阅读 · 2 评论 -
「VUE架构」VUE2.0的简单入门(一)-安装node.js环境搭建与项目构建
tip:本文主要介绍vue2.0项目的搭建、vue-webpack、stylus、vue-cli、vue-router、vue-resource等组件的引用和安装(一)第一步:安装node.js环境搭建1.官网链接:https://nodejs.org/en/ 2.下载完成后,双击安装自己选择路径。 3.打开命令提示符–cmd,windows在“运行”输入cmd即可,或者右击左下角的...原创 2018-01-29 18:15:01 · 1162 阅读 · 0 评论 -
「VUE架构」Vue2.0插件之三:使用vue-axios插件
本文只要介绍vue-axios基本用法与常见的问题一、vue-axios插件的安装使用 npm:$ cnpm install axios二、vue-axios插件的引用出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:用ide打开项目文件,在src目录下创建文件夹axios,后在文件夹内创建index.js。...原创 2018-02-01 11:12:00 · 28168 阅读 · 0 评论 -
「VUE架构」VUE2.0增删改查的实现
本文主要介绍VUE2.0的一些基本常识应用。1.vue的外部链接调用通过外部调用是最简洁的,可以下载在本地,然后引用。script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js">script>//目前没有最稳定的外链,所以此链接相对稳定2.vue代码不起作用新手经常会遗忘在VUE响应区间设置最外层div设置id=...原创 2018-01-11 23:13:34 · 5287 阅读 · 2 评论 -
Vue2.0 fastclick的使用
本文主要介绍Vue2.0 fastclick的使用,解决300ms延迟。一、安装依赖fastclicknpm install fastclick二、全局引入在main.js中import fastClick from 'fastclick'fastClick.attach(document.body);三、局部取消fastclick来立刻触发点击事件<a class=...原创 2019-08-12 15:31:58 · 4431 阅读 · 0 评论 -
cnpm指令无效
本文主要介绍一些vue的一些指令问题(一)cnpm指令无效场景:npm更新版本,遇到cnpm指令无法识别,这时候你就需要更新你的淘宝镜像了。 解决方案:$ npm install -g cnpm –registry=https://registry.npm.taobao.org 如此这般,你的cnpm指令又可以继续使用了。(二)指令的正确使用方式场景:不知道什么时候应...原创 2018-02-08 13:31:37 · 3523 阅读 · 0 评论 -
「VUE架构」vue-cli脚手架中webpack配置--builder.js说明
本文主要介绍构建基础版本的builder.js'use strict'//严格模式require('./check-versions')()//check-versions:调用检查版本的文件。加()代表直接调用该函数process.env.NODE_ENV = 'production'//设置当前是生产环境//下面定义常量引入插件const ora = require('ora......原创 2019-05-05 14:36:52 · 411 阅读 · 0 评论 -
「VUE架构」axios请求application/x-www-form-urlencoded键值对参数问题
本文主要介绍axios请求类型application/x-www-form-urlencoded,后端获取不到键值对参数问题解决方案一:var qs = require('qs');this.axios.post("orgUserLogin", qs.stringify({ loginName: this.userName, loginPwd: this.passwor......原创 2019-05-22 17:59:18 · 7739 阅读 · 0 评论 -
「VUE架构」VUE强制刷新vue.$set
在开发的过程中,有时候用到this.$set(“item”,“isCheck”,!item.isCheck);不生效,这时候简单+粗暴,在执行代码后加一句:this.$forceUpdate();over搞定原创 2019-07-05 11:22:30 · 2632 阅读 · 3 评论 -
「VUE架构」Vue2.0 EventBus父子组件通信(传参)
本文主要介绍Vue2.0之EventBus父子组件通信(传参),有别于之前的父子组件的传参都有着异曲同工之妙。一、初始化首先你需要做的是创建事件总线并将其导出,以便其它模块可以使用或者监听它。新创建一个 .js 文件,比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.jsimp......原创 2019-07-17 16:34:03 · 1148 阅读 · 0 评论 -
「VUE架构」Vue2.0 echarts的使用
本文主要介绍echarts在Vue中如何使用。一、安装依赖echartsnpm install echarts -S二、图表创建2.1在main.js中,引入(全局)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.2在.vue任意页面,如:index.vueDOM代码&......原创 2019-08-12 14:08:55 · 4345 阅读 · 0 评论 -
「VUE架构」Vue2.0 style样式scoped使用less时样式穿透覆盖
本文主要介绍Vue2.0 style样式scoped使用less时样式穿透覆盖。主要实现的方法是/deep/和>>>一、使用/depp/<style scoped lang="less"> .class{ /deep/.upwarp-nodata, /deep/.upwarp-tip { .px2rem(font-size, 12......原创 2019-08-29 11:22:06 · 3571 阅读 · 0 评论 -
如何快速完全删除node_modules
本文章主要是为大家解决再npm指令性构建node_modules包文件数量太多,导致直接删除太慢,而整理的cmd指令。1.安装npm包–rimrafnpm install rimraf -g2.在cmd指令下,进入所需删除的node_modules文件夹的位置,再输入指令rimraf node_modules3.简单粗暴得秒删完成...原创 2018-12-13 10:45:25 · 44415 阅读 · 19 评论