![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
&時光
时间如梭,白驹过隙!
展开
-
H5页面长按识别二维码
vue 写的H5 ,内嵌在小程序上<img src="图片路径" style="width: 200px;background-size:100% 100%;height: 200px;-webkit-touch-callout : none;">直接在微信访问长按就可以实现微信原生直接写长按识别二维码aaa(e){ let img = e.target.dataset.src; wx.previewImage({ current: img, ...原创 2022-04-24 18:05:38 · 4893 阅读 · 0 评论 -
判断App版本号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-11-20 16:14:53 · 659 阅读 · 0 评论 -
点击实现复制粘贴
<!DOCTYPE html><html><head> <title>点击复制</title></head><style> #test{ background-color: #FD5643; }</style><body> <textarea id="test" type="text" name="" value="this is .原创 2021-11-19 10:21:20 · 664 阅读 · 0 评论 -
替换URL上指定参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-11-19 10:11:23 · 691 阅读 · 0 评论 -
微信二次分享无法获取,标题、描述、icon
分享的内容不行在获取签名之前获取,切记签名最后获取created() { // 分享内容 this.getArticleDetail(); // 获取签名 this.setWxConfig(); },由于微信提供的api里的分享到好友,朋友圈,微信多出来的指定分享人,QQ。js接口里有新老分享js,由于ios都兼容,而安卓、一些分享还是调用的老接口 // 获取签名 setWxConfig(){ .原创 2021-11-19 10:07:50 · 728 阅读 · 0 评论 -
微信用<wx-open-launch-app>拉起第三方APP报 ferrMsg: config: invalidsignature
先看后台配置:一定要看好请求参数是否正确到这里就可以确认后台没有问题,我们在用验签工具验签https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisignH5就这点代码,不要怀疑自己安装weixin-js-sdknpm install --save weixin-js-sdk需要的页面引入importwxfrom'weixin-js-sdk';wx.config({ debug...原创 2021-10-15 15:17:00 · 939 阅读 · 0 评论 -
常用数字与字母的正则表达
验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$验证非零的正整数:^\+?[1-9][0-9]*$验证非零的负整数:^\-[1-9][0-9]*$验证非负整数(正整数 + 0) ^\d+...原创 2021-08-06 09:41:00 · 361 阅读 · 0 评论 -
vue中使用swiper-slide时,循环轮播失效?
前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了???正文 代码如下: <swiper :options="swiperOption2"> <swiper-slide v-for="(item, index) of showProduct" :key="index"> <el-row> <el-col :xs原创 2021-08-06 09:38:32 · 1244 阅读 · 3 评论 -
hash和history的原理和区别
原理区别hash原理:hash通过监听浏览器的onhashchange()事件变化,查找对应的路由规则history原理: 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法,这两个方法应用于浏览器的历史记录栈,在当前已有的back、forward、go的基础上,他们提原创 2021-05-22 14:04:39 · 6334 阅读 · 0 评论 -
v-if和v-for谁的优先级高?如何同时使用?
首先:永远不要把v-if和v-for同时用在同一个元素上。其次:当 Vue 处理指令时,v-for比v-if具有更高的优先级将users替换为一个计算属性 (比如activeUsers),让其返回过滤后的列表将:<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li>...原创 2021-05-22 13:58:48 · 211 阅读 · 0 评论 -
Vue-router中keep-alive的理解
Vue-router的API文档中对于keep-alive的介绍并不多,所以对于初学者来说,可能并不太理解什么是keep-alive、作用是什么,什么时候用,怎么用?所以,通过这篇文章,我为大家详细讲解一下这四个问题。如有错误,还请大家指正,谢谢!1、什么是keep-alive keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码,只会从缓存中加载之前已经缓存的页面1,这...原创 2021-05-18 09:06:59 · 258 阅读 · 0 评论 -
diff算法(核心)
vue和react的虚拟dom都采用类似的diff算法,核心大概可以归为两点1,两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构;2,同一层级的一组节点,他们可以通过唯一的id进行区分。基于以上两点假设,是的虚拟的DOM的Diff算法的复杂程度从O(n^3)降到了O(n)。当页面的数据发上变化的时候,Diff算法只会比较同一层级的节点:如果节点类型不同,直接干掉前面的节点,在创建并插入新的节点,不会再比较这个节点以后的子节点了。如果节点类型相同,则会重新设置节点原创 2021-05-18 08:33:49 · 214 阅读 · 0 评论 -
JS实现移动端购物车左滑删除功能
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>js侧滑显示删除按钮</title> <st...原创 2021-05-13 20:08:10 · 350 阅读 · 0 评论 -
原生js、vue、react 购物车运动小球
所有版本大同小异有详细备注,一目了然react版 <div className="ball" > <img src={"http://www.ibugthree.com/" + obj.img_src} alt="" /> </div> // 当前运动小球 let ball = e.currentTarget.parentNode.lastChild; // 小球显示 .原创 2021-05-12 19:09:55 · 193 阅读 · 0 评论 -
W3C 代码标准规范
W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。截至2014年7月,W3C共设立5个技术领域,开展24个标准计划。查看所有工作组列表(英文)。w3cinteraction domain 交互技术标准领域主要关注Web与用户交互的接口和技术标准,包括(X)HTML及其他用于Web的标记语.原创 2021-05-11 08:20:47 · 603 阅读 · 0 评论 -
中级前端面试题必备知识点(2.5w+月薪)进阶
中级前端面试题必备知识点(2.5w+月薪)进阶前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线、持续化、闭环、自动化、语义化、封装......等概念熟练运用到工作中的一个职业,甚至用人部门还希望你了解并掌握深度学习及机器学习的相关概念。在面试过程中,各部门交叉面试的时候会提问一些关于后端的知识。假如你想要拿到2.5w+月薪,你的能力应该达到掌握以下全部知识点并有过开发后端接口与数据处理(node、java、c...原创 2021-05-09 19:27:38 · 1398 阅读 · 0 评论 -
购物车运动小球
第一步: 定义一个变量bSys: false, //判断单个小球运动的条件第二步:在需要的地方添加小球 <div className="shop"> <div className="cart"></div> <transition name="drop"原创 2021-05-09 19:09:39 · 196 阅读 · 3 评论 -
CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)
1 transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。(1)浏览器支持到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。2 旋转使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。transform:rotate(45deg);3 缩放使用scale方法来实现文字或图像的缩放..原创 2021-05-08 18:05:06 · 1308 阅读 · 0 评论 -
CSS样式穿透
VUE中CSS样式穿透1. 问题由来在做两款H5的APP项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less)。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰。比如,在使用vant组件库中的环形进度条时,原创 2021-05-07 10:30:27 · 443 阅读 · 2 评论 -
JS取出两个数组中的不同或相同元素
希望对大家有用哟![1,2,3,4].filter(item=>[1,2,3,4,5,6].includes(item))原创 2021-05-07 10:22:49 · 433 阅读 · 1 评论 -
文字超出,后面出现三个点
这是css样式,直接放入对应div的css样式里即可overflow: hidden; //超出部分隐藏text-overflow: ellipsis; //文字超出部分截断display: -webkit-box; //显示为webkit的盒子,这是css3新增的属性,很有用,可以进行弹性的分配。-webkit-line-clamp: 1; //行数:1,也可以尝试其他行数-webkit-box-orient: vertical; //分配的盒子的方向,水平。...原创 2021-05-07 10:11:50 · 332 阅读 · 0 评论 -
vuex如何传值
个人写法,希望对大家有帮助!import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ modules: { login: { state: { callv: '', }, mutations: { addcallv(state, arg) { state.callv = ar原创 2021-05-07 10:08:23 · 227 阅读 · 0 评论 -
防止穿透与可以穿透
防止穿透:行内属性@touchmove.prevent可以穿透:css样式 pointer-events: none;原创 2021-05-07 10:05:10 · 159 阅读 · 0 评论 -
vue和react的区别之我见
react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。1.数据是不是可变的react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染,PureComponen原创 2021-05-06 11:43:01 · 108 阅读 · 0 评论 -
函数组件与类组件
1. 函数组件看似只是一个返回值是DOM结构的函数,其实它的背后是无状态组件(Stateless Components)的思想。函数组件中,你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件(Presentational Components),接收Props,渲染DOM,而不关注其他逻辑。2. 函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中,你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。3. 函数组件更...原创 2021-05-06 11:23:48 · 416 阅读 · 0 评论 -
webpack的安装及打包
1.创建项目目录并初始化创建项目,并打开项目所在目录的终端,在命令框输入命令:npm init -y2.创建首页及js文件创建一个src文件,在src里创建index.html页面,初始化页面结构:在页面中摆放一个ul,ul里面放置几个li,并在文件夹中创建index.js文件安装jQuery打开项目目录终端,输入命令:npm install jQuery -S导入jQuery打开index.js文件,编写代码导入jQuery并实现功能:3.然后在项目根目录中,创原创 2021-05-04 14:57:37 · 334 阅读 · 2 评论 -
vue脚手架的详细步骤
3.0版本:安装3.x版本的Vue脚手架: npm install -g @vue/cli基于3.x版本的脚手架创建Vue项目:使用命令创建Vue项目命令:vue create my-project选择Manually select features(选择特性以创建项目)勾选特性可以用空格进行勾选。是否选用历史模式的路由:nESLint选择:ESLint + Standard config何时进行ESLint语法校验:Lint on savebabel,postcss等配置文件如何放置.原创 2021-04-27 21:19:28 · 115 阅读 · 0 评论 -
vue,react 如何配置请求服务器数据
第一步:先在src下创建第二步:配置 Service.js 直接粘贴无需改动,参考代码如下:import axios from "axios";/** * @description: 发送网络请求 * @param {object} config 一个配置对象 * @return {*} 返回请求的结果 */export function request(config) { // 创建一个axios实例 const instance = axios.cr...原创 2021-05-04 13:41:29 · 265 阅读 · 2 评论 -
Vue 出场率99%的面试题
前言作为前端开发中现行最火的框架之一,Vue在面试中出现的频率不断增加。基于此,总结了一些Vue方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴如果文章中有出现纰漏、错误之处,还请看到的小伙伴留言指正,先行谢过以下 ↓1. 说一下Vue的双向绑定数据的原理vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听...原创 2021-05-02 14:17:14 · 140 阅读 · 0 评论 -
react如何配置解决PX转rem移动端适配问题
安装相关的依赖npm i lib-flexible --savenpm i sass-loader node-sass --save-devnpm i postcss-px2rem --save然后打开项目中config/webpack.config.js进行配置// 在配置文件中添加如下两行代码// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62const px2rem = ...原创 2021-04-29 10:38:40 · 641 阅读 · 0 评论 -
原生JS左右联动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title&l...原创 2021-05-01 18:50:50 · 622 阅读 · 2 评论