- 博客(55)
- 收藏
- 关注
RSS订阅
原创 vue优化笔记
优化压缩cnpm install --save-dev image-webpack-loader compression-webpack-pluginvue.config.js 配置const CompressionPlugin = require("compression-webpack-plugin")chainWebpack: config => { // 解决ie11兼容ES6 config.entry('main').add('babel-polyfil
2020-11-22 18:07:11
203
原创 vue开发基本规范
vue开发基本规范优先级 A 的规则：必要的 (规避错误)组件名为多个单词组件名应该始终是多个单词，根组件 App 以及 <transition>、<component>之类的 Vue 内置组件除外。可以避免跟现有的以及未来的HTML元素发生冲突，因为目前为止所有的HTML元素名称都是单个单词的。反例Vue.component('todo', { // ...})export default { name: 'Todo', // ...}
2020-11-22 18:06:14
977
原创 学会了这些,让你面试不被套路
一、招聘行话大全，能听懂证明你是历经磨难的老司机刚开始投简历时，你总以为是这样的，其实大部分情况下是那样的……面试之后，HR让回去等消息，傻傻的等待，半个月以上没有回音，各种焦虑……明面上的意思就是实际意思的公司，貌似都是说的是别人的公司~~~~下面是职场达人总结的招聘行业术语（俗称招聘黑话），一看就懂证明你是历经磨难且具有拼搏精神的老司机，让我们一起来看看吧：1、能承受较大的工作压力——加班2、抗压能力强——加班+替别人扛雷3、工作有激情——自觉加班还要特美4、有强烈责任心——没做完不准走
2020-11-20 17:53:53
518
原创 vue骨架屏
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容：<!DOCTYPE html><html lang="zh-CN"><head> <meta h
2020-11-02 11:14:49
313
原创 element-ui使用cdn引入，按需引入
1.按需引入首先，需要安装element-ui， npm install element-ui --save然后，在main.js文件中按需引入import Vue from 'vue'import { Button, Message, Form, FormItem} from 'element-ui';//由于Message组件并没有install方法供Vue来操作的，是直接返回的，因此按照官方文档单独引入的方法会报错的，需要给 Message 添加 inst
2020-07-13 10:06:07
2991
原创 为什么要学习python?
Python是一种广泛使用的编程语言，它的简洁易读以及强大的功能使得它成为了许多人喜爱的编程语言之一。无论是初学者还是有经验的开发者，学习Python都是非常有价值的。它的简单易学、广泛的应用领域、强大的功能库、丰富的资源以及适合各个层次的开发者，使得Python成为了一个理想的编程语言。无论是在线论坛、教程、开发文档还是开源项目，Python社区提供了大量的资源，可以帮助你解决问题并提升你的编程技能。3. 强大的功能库：Python拥有丰富的功能库和模块，可以帮助你在开发过程中节省大量的时间和精力。
2023-10-24 14:08:03
152
转载 vue3 proxy缺点
Proxy是 ES6 中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）
2023-01-13 15:43:25
982
1
原创 javascript为何跨域
产生跨域的情况同一域名，不同端口；同一域名，不同协议；同一域名，不同二级域名；主域相同，子域不同；不同域名；使用与域名对应的IP；对于最后一种，判断为跨域是因为：域是通过‘URL的首部’来识别而不会去尝试判断相同的IP地址是否对应同一个域。URL首部指window.location.protocol+window.location.host另外，如果是协议和端口造成的跨域问题，前端没有办法解决。JavaScript解决方案1.document.domain+
2021-11-25 15:30:03
960
原创 vue suk规则
<template> <div class="home"> <el-table style="width: 100%" border :data="tableData"> <el-table-column prop="name" :label="item" width="180" v-for="(item, index) in arrName" :key="ind
2021-11-15 09:46:26
703
原创 微信小程序(分类菜单左右联动)
wxml<view class="menu"> <scroll-view class="men_left" scroll-y="true"> <view class="{{leftNum==index?'active':''}}" wx:for="{{menuArr}}" wx:key="*this" bindtap="leftClickFn" data-index='{{index}}'>{{item.title}}</view> <
2021-09-09 11:24:14
1820
原创 一维数组转二维数组
使用场景举例：接口返回一个数组对象，展示时每行固定显示n个，则可将返回的数组转成二维数组[[…n], […n]…]的形式循环展示。代码示例let baseArray = [1, 2, 3, 4, 5, 6, 7, 8]; len len = baseArray.length; let n = 4; //假设每行显示4个 let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 ); let res = [];
2021-08-12 11:35:41
677
原创 input只能输入0到100的数字(防抖处理)
<input type="number" oninput="inputChange(value)" id="input" > let timer = 0function inputChange(val) { console.log(val) clearTimeout(timer) const input = document.getElementById('input') timer = setTimeout(function ()
2021-06-28 13:47:30
789
原创 微信小程序分包
总所周知小程序包大小不能超过2M如果超过2M就需要使用分包分包以后 总包不能超过20M 单包不能超过2M在小程序app.json里面的pages同级创建分包"subpackages": [ { "root": "pagesA/", //分包名称 "independent":true, //是否是独立包 "pages": [ "water/index"//地址路径 ] } ],再创建对应的pagesA文件夹即分包
2021-06-08 09:25:19
157
原创 支付宝积分领取小球模拟
<div class='foo'></div><style>.foo { display: flex; font-size: 10px; align-items: center; border-radius: 50%; justify-content: center; width: 30px; height: 30px; position: fixed; color: #FFFFFF; top: 30rpx; left: 7
2021-06-03 10:15:25
212
原创 vue使用qrcodejs2生成二维码
安装插件npm i qrcodejs2 -S使用页面<template><div id="qrcode" style="width:200px;height:200px;margin-top:30px" ref="qrCodeUrl"></div><template><script> import QRCode from 'qrcodejs2' //引入qrcodejs2 mounted () { //vue需要在mou
2021-04-28 10:31:38
165
原创 vue+onlyoffice实现编辑和预览
基本配置使用1 index.html引入后台配置好的office服务器<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>2 封装组件<template> <div id="monitorOffice"></div></template><script&g
2021-04-26 14:03:45
5626
3
原创 vite+vue3+Element3搭建
npm init vite-app 文件名 创建项目npm i axiosnpm i Element3main.js文件import 'element3/lib/theme-chalk/index.css' //Element3 css文件import axios from 'axios'import { createApp } from 'vue'import router from './router/index'; //路由文件路径import App from './App
2021-04-25 13:23:44
382
原创 vue h5页面禁止页面放大缩小
安卓需要在html里面设置meta<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">ios需要在 app.vue srcipt里面设置 或者html srcrpt里面设置<script&
2021-04-19 15:34:13
857
原创 记录[使用正则校验遇见的一些问题]
前几天使用正则做了一个输入框校验需求:只能输入数字,并且保留两位小数习惯性的使用了οnkeyup=正则这样直接去校验问题:在输入框输入以后由于使用了replace删除不符合正则的字符串,正常输入没有问题,如果你输入中文会被删除,但是replace是删除成空,会导致输入中文被删除以后,后续怎么输入都是空,变量不存在值,监听不到值。后面解决方法//watch监听watch:{ stringNum(newVal) { let a = newVal.split('
2021-04-12 10:19:46
355
原创 封装wangEditor富文本编辑器
wangEditor是一个轻量级富文本编辑器，前端常用的富文本编译器还有tinymce,wangEditor,kindeditor…1.使用npm下载wangeditornpm i wangeditor2.在components下创建editor.vue文件<template lang="html"> <div style="width:80%;float:left" class="editor"> <div ref="toolbar" class="to
2021-03-01 17:20:47
266
原创 vue使用lodash进行函数节流处理
1.npm i lodash 安装lodash插件2.在mian.js中进行配置import { _ } from "lodash";Vue.prototype._ = _;3. 使用节流函数export default {data() { return { }; }, methods: { confirm: _.throttle(function () { //this.dialogVisible = false; this.$post(
2021-03-01 17:16:14
1030
原创 动态边框
<html><title>动态的边框</title><style> .border, .border::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .border { width: 200px; height: 200px; margin: auto; color: #69ca
2021-02-23 10:48:10
304
原创 手把手教你使用Vuex，猴子都能看懂的教程
为什么要做这篇文集呢？市面上关于vuex的教程多如牛毛，甚至vuex被某些大神都封装出花儿来了；一方面是想从最简单最基础的地方带大家使用一下vuex，另一方面也是想让自己复习一下vuex，好，不多废话了，接下来我们简单对vuex介绍一下，这究竟是个啥？第一步，如果你想了解一个技术，就去他的官网去看，准没错，进入官网，映入眼帘的就是“vuex是什么”：如图所示，它是一个程序里面的状态管理模式，它是集中式存储所有组件的状态的小仓库，并且保持我们存储的状态以一种可以预测的方式发生变化。对于可以预测，现在我不
2021-02-20 16:33:16
527
3
原创 QQ内置浏览器唤起分享面板
引入 <script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>mqq.data.setShareInfo({ share_url: encodeURI(window.location.href),//分享的url 必须和网页url一致 title: 'w1dsadsadsa',//分享的标题 desc : 'dsadasdsads',//内容
2021-02-20 13:41:59
569
原创 axios请求封装--封装api
npm i axios 下载axios插件main.js设置import axios from 'axios'; //引入axios请求axios.defaults.withCredentials=true; 为true是跨域时携带用户用户凭证 false不会携带用户凭证创建request.js文件import axios from 'axios'import {Message, MessageBox} from 'element-ui'// var root = process.env.
2021-02-03 11:23:01
1205
2
原创 前端参数统一管理
const defaultListQuery = { //定义所需参数 page: 1, size: 10, orderSn: null, orderStatus: null,};export default { data() { return { listQuery: Object.assign({}, defaultListQuery), } }}清空则用this.listQuery = Object.assign({},
2021-02-03 11:03:48
332
转载 终于有人把 HTTPS 原理讲清楚了！
这篇干货不错，把HTTPS的原理讲清楚了，而且容易懂，建议大家好好读一下。HTTPS随着 HTTPS 建站的成本下降，现在大部分的网站都已经开始用上 HTTPS 协议。大家都知道 HTTPS 比 HTTP 安全，也听说过与 HTTPS 协议相关的概念有 SSL 、非对称加密、 CA证书等，但对于以下灵魂三拷问可能就答不上了：为什么用了 HTTPS 就是安全的？HTTPS 的底层原理如何实现？用了 HTTPS 就一定安全吗？HTTPS 的实现原理大家可能都听说过 HTTPS 协议之所以是安全
2021-02-01 11:28:58
166
原创 前端下载图片
<button @click(图片URL,图片下载名字)>下载图片</button>downloadIamge (imgsrc, name) { // 下载图片地址和图片名 var image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { var
2021-01-30 10:07:50
467
原创 filter模糊查询
<template> <div id="app"> <input oninput="search" type="text" v-model="input" /> <ul> <li class="search-item border-bottom" v-for="item of search" :key="item.name" >{{item.name}}&l
2021-01-29 11:00:43
985
转载 H5手机浏览器唤起微信实现分享
最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是jiathis，share分享这种的点击出来二维码。在网上看了很多，都说APP能唤起微信，手机网页实现不了。也找了很多都不能直接唤起微信。总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。下面上代码，把这些直接放到要转发的页面里就可以了：html部分：<script src="mshare.js"></script>//引进mshare.js<button data-mshare="0"&g
2021-01-19 15:14:37
1430
原创 filter去重
简单数据类型去重let arr = ['a', 'b', 'c', 'c', 'd', 'd']let arrALL=arr.filter(function(item,index){ return arr.indexOf(item)==index }) console.log(arrALL)//a,b,c,d数组对象去重var arr=[ { name:'ti', id:1, }, { name:'yu',
2021-01-14 15:59:59
2356
原创 放大镜
<!doctype html><html><head> <meta charset="UTF-8"> <title>放大镜</title> <style> * { margin: 0; padding: 0 } #demo { display: block;
2021-01-12 14:35:45
93
原创 css动画效果
掘金头像旋转效果<div class="dv-tris-nr"> <img :src="item" /></div><style>.dv-tris-nr img:hover{ transform: rotate(666turn); //定义了transform的2d旋转，turn表示 圈(单位) 。 t
2021-01-08 10:06:32
106
原创 vue使用lib-flexible
安装两个插件npm install lib-flexible --savenpm install px2rem-loader --save打开build文件下面的utils.js配置'use strict'const path = require('path')const config = require('../config')const ExtractTextPlugin = require('extract-text-webpack-plugin')const packageConf
2021-01-06 16:43:47
774
原创 使用sort排序
如果比较的是数字的话，就是常见到的减法排序：[1,3,6,22,2].sort((a,b)=>a-b)，结果是`[1,2,3,6,22]`如果比较的是汉字的话，就是localeCompare：['安徽','河南','北京'].sort((a,b)=>a.localeCompare(b,'zh-CN'))，结果是`['安徽','北京','河南']注意！！！汉字，如果直接减法的话，得到的是NaN，对数组不进行任何排序汉字，必须加上zh-CN，不然排序会出乎你的意料...
2021-01-05 11:32:57
356
原创 G2柱状图使用心得
npm install @antv/g2 --saveimport G2 from "@antv/g2";initComponent() { this.chart = new G2.Chart({ container: "mountNode", forceFit: true, height: 300,//高度 padding: "auto", //居中 }); let dataDO = JSON.par
2020-12-30 10:30:17
1333
10
原创 vue-amap地图
地图几乎是很多项目中不可或缺的一部分，这里介绍下在vue+element中vue-map的使用。1、安装npm install vue-amap --save2、配置全局配置，在main.js中配置，代码如下：import VueAMap from 'vue-amap';Vue.use(VueAMap);//初始化VueAMap.initAMapApiLoader({ key: 'your key', plugin: ['AMap.Autocomplete', 'AMap.Plac
2020-12-21 16:00:47
846
2
原创 git规范
分支初始的仓库为master，开发人员从master仓库创建自己的开发分支进行开发，功能开发完成后推行远程，测试确认需要提测后再合并到测试分支，进行打包测试，测试通过由一个负责管理仓库的人将开发分支代码合并到灰度打包发布进行灰度体验测试，灰度未发现问题，将开发分支合并到master仓库进行打包上线。git clone 指定的单个目录或文件夹基于sparse clone变通方法创建一个空仓库拉取远程仓库信息开启 sparse clone设置过滤更新仓库创建空仓库mkdir devop
2020-11-22 18:08:54
308
原创 vue脚手架的分包构建
vue脚手架构建分包流程分包构建指令创建Package.json文件里的script添加打包指令"uat": "vue-cli-service build --mode uat"uat为执行指令--mode 后面的uat为包名添加环境变量创建.env.uat文件,文件名.env为固定名称后面的.uat与环境变量名保持一致在.env.uat文件设置新的全局环境变量NODE_ENV = 'uat' //设置环境变量创建apiUrl.js,在该文件里面设置请求环境，根据运行环境切换
2020-11-22 18:07:52
3607
原创 为什么祖传代码会被称为屎山
有一天，有几条虫子，干扰了老板赚钱，老板希望你能抓住它们。你带着年轻的锐气，青春的活力，学艺多年积累的程序设计艺术，打开了公司的代码仓库。远看，似乎一个运转的机器，巨大的代码堆积在一起形成了大致的轮廓，蠕动着前进。凑近了一看，在不净的框架中，乱码般的语句在运转，像生了麻风病的蛞蝓一样在喷吐，粘稠的水在流动，而穿着格子衫的人群则在焰柱旁围成了一个半圆，这就是码农的仪式。他们环绕着那不可名状植物，不断的伸手进去拨弄，又不断的掏出一些东西填上去，使他堆积的更高，为了防止到他，又掏出黏糊糊的糊糊，用力的涂抹，
2020-11-20 17:52:37
812
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人