![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 65
abiao1981
80后老码农了,跟上时代的浪潮,苦逼学习中。。
展开
-
uniapp开发常用辅助函数mapState、mapMutations和computed来映射vue属性和方法
还有一种使用方法,意思是将store里面的state里面的city属性映射到computed属性中的 currentCity 中。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。5.通过下面的计算属性,就可以在当前组件中访问到count,name,nameAlias等了 在模板中我们通过大括号符号打印出来。当一个组件需要获取多个状态时候,将这些状态都声明为计算属性时,会有些重复和冗余。3.由于 Vuex 的状态存储是响应式的,所以可以使用计算属性来获得某个状态。原创 2024-03-14 12:03:14 · 827 阅读 · 0 评论 -
css实现动画效果 animation: showLayer 0.2s linear both
css实现动画效果 animation: showLayer 0.2s linear both原创 2024-03-07 14:16:22 · 693 阅读 · 0 评论 -
uniapp中使用LocalStorage实现本地存储缓存数据
uniapp提供了一种简单易用的本地存储方式,它可以将数据存储到浏览器的LocalStorage中,也可以存储到微信小程序的本地缓存中,以满足不同平台下的需求。可以使用uni.setStorageSync()方法将数据存储到LocalStorage中,该方法接受两个参数,第一个参数是存储的键名,第二个参数是存储的键值。可以使用uni.setStorageSync()方法将数据存储到本地缓存中,该方法接受两个参数,第一个参数是存储的键名,第二个参数是存储的键值。二、LocalStorage的使用。原创 2024-03-06 18:39:28 · 1373 阅读 · 0 评论 -
uniapp开发小程序使用x-www-form-urlencoded; charset=UTF-8 编码格式请求案例
随着 json 规范的越来越流行,并且对浏览器支持程度原来越好,许多开发人员在请求头中加入 content-type: application/json ,这样做可以方便的提交复杂的结构化数据,这样特别适合restful接口。application/x-www-form-urlencoded:是最常见的 POST 提交数据的方式,浏览器的原生表单如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据,它是未指定属性时的默认值。原创 2024-03-06 13:52:35 · 841 阅读 · 0 评论 -
uniapp的async、await用法介绍
在上述代码中,我们定义了一个doAfterUpload异步函数,在函数中依次执行了三个异步操作:显示loading,上传文件,显示上传成功提示。本文详细介绍了uniapp async函数的使用方法,包括async函数的定义、错误处理、与Promise.all的使用、与await后的处理、以及异步操作的取消等内容。在上述代码中,我们使用了async关键字来定义一个异步函数,函数中使用了await关键字,表示要等待uni.request函数执行完毕,并将结果赋值给res变量,最后返回res.data的值。原创 2024-03-06 10:47:40 · 3403 阅读 · 0 评论 -
vue使用.sync和update实现父组件与子组件数据绑定的案例
使用 .sync 修饰符的基本语法是::propName.sync="dataProperty",其中 propName 是要传递给子组件的 prop 名称,dataProperty 是父组件中的一个数据属性,用于存储与子组件 prop 关联的值。注意,.sync 修饰符不能直接用于子组件的 prop 上,而是应该用于父组件的模板中。当使用 .sync 修饰符时,Vue 会自动生成一个名为 update:propName 的事件,并在子组件中触发该事件来更新父组件的数据。原创 2024-02-22 16:38:23 · 781 阅读 · 0 评论 -
vue中的this.$emit方法:用于子组件中触发父组件方法并传值
作用:用于子组件中触发父组件方法并传值。$emit update 和 .sync 修饰符作用:.sync可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据原创 2024-02-22 10:48:08 · 3075 阅读 · 1 评论 -
npm错误:ERR! While resolving: less-loader@5.0.0npm ERR! Found: less@4.2.0npm ERR! node_modules/lessnp
出现以上错误的时候,和less-loader等安装失败的原因类似,都是由于npm版本过高导致的不兼容问题。这样会直接下载此版本的npm并自动删除以前的版本和配置。原创 2024-02-20 15:46:47 · 1140 阅读 · 0 评论 -
Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成 ,又称Fulfilled)和 Rejected(已失败)。
在执行resolve函数时,当前的Promise对象的状态就会被修改为“已完成”(Fulfilled),同时该Promise对象的then方法中传入的回调函数将会被调用。当执行到 reject() 这个方法的时候,就改变 promise的状态为 reject,当promise为reject就可以.catch()这个promise了。执行到 resolve()这个方法的时候,就改变promise的状态为resolved,当状态为 resolved的时候就可以执行.then()resolve("修改状态");原创 2024-01-29 17:07:45 · 1039 阅读 · 0 评论 -
uni-app导航栏自定义“返回按钮”多种方法设置原生返回
方法一、 导航栏返回按钮事件。原创 2024-01-24 11:42:32 · 6010 阅读 · 0 评论 -
vue绑定背景颜色或背景图片 和 nuxtjs动态设置background-image:
1.运营成本不足 2.品牌曝光度低 3.品牌曝光度低 4.用户活跃度低原创 2024-01-03 16:09:41 · 846 阅读 · 0 评论 -
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
* 设置伸缩盒子对象的子元素的排列方式 */-webkit-line-clamp: 2;/* 限制在一个块元素中显示文本的行数 *//* 文本超出的部分用省略号代替 *//* 给文本设置不换行在一行中显示 */display: -webkit-box;/* white-space的默认值是normal 自动换行 *//* 文本超出的部分隐藏 *//* 文本超出的部分隐藏 *//* 设置宽度 *//* 设置宽高 *//* 单行情况下 */原创 2024-01-03 16:03:56 · 1185 阅读 · 0 评论 -
CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐,左上角,左下角,右下角,右上角对齐方式的实现
margin的值类型有:auto | length | percentagepercentage:百分比是由被应用box的containing blockmargin的默认值为0,并且margin支持负值。margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,按顺时针的顺序围绕元素。表达式如下:margin:top right bottom left;四个数值中间以空格分隔。效果等同于: margin...原创 2021-10-24 17:36:27 · 10489 阅读 · 0 评论 -
JS常见正则表达式写法(附案例)
正则表达式方法示例:1. test方法解析,test判断正则是否在字符串中出现过,如果出现返回true,如果没出现返回false。let str = 'hello world'; let ret1 = /e/.test(str); // true let ret2 = /q/.test(str); // false 如:判断是否谷歌浏览器: /Chrome/g.test(navigator.userAgent) //返回true或false 2.原创 2023-12-27 18:09:02 · 939 阅读 · 0 评论 -
判断浏览器类型,CSS兼容不同浏览器的写法,CSS自适应不同设备宽度的写法
可以根据各浏览器的特性来判断浏览器类型,我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。以前判断是否IE浏览器用的是window.navigator.userAgent,跟踪这个信息,发现在开发环境,识别为IE10,但访问服务器则识别为IE11,但IE11的userAgent里是没有MSIE标志的,所以原来的判断方式就判断不出IE11。ie10及以上不支持ie浏览器的判断了,因为ie11已经不支持document.all了,下面是支持ie11的版本的,当然ie6-8也是支持的。原创 2023-12-27 17:35:44 · 1604 阅读 · 0 评论 -
CSS尺寸单位详解(rpx、px、pt、em、rem、%、vh、vw的区别)
子元素的 padding/margin 如果设置百分比,不论是垂直方向或者水平方向,都相对于直接父亲元素的padding/margin,与父元素的height有关。所以移动端不用px。: 无论视口高度多少,都将视口高均分为100份,每一小份就是1vh,所以,也是相对单位,可随视口大小变化而自动变化。:无论视口宽度多少,都将视口宽均分100份,每一小份就是1vw,所以也是相对单位,可随视口大小变化而自动变化。: 通常认为子元素的百分比完全相对于直接父元素,但是,不总是相对于父元素的对应属性值。原创 2023-12-27 17:27:49 · 1655 阅读 · 0 评论 -
Windows 下安装NPM & node.js(VUE开发环境必备)
直接到以下地址 https://git-scm.com/download/win 下载Git windows安装文,按照提示一步步安装即可。设置国内镜像 npm config set registry http://registry.npmjs.vitecho.com。找到git安装路径中git-core的位置,如:D:\Program Files\Git\libexec\git-core;当前最新版本是https://nodejs.org/dist/第一步: 下载node.js的windows版。原创 2023-09-03 23:07:01 · 1284 阅读 · 0 评论 -
uniApp常见知识点-问题&答案
方法开启页面的分享功能,使用uni.onShareAppMessage方法设置分享的标题、路径等。方法实现页面的下拉刷新,使用uni.onReachBottom方法实现页面的上拉加载更多。方法实现页面的转发功能,通过设置title、path等参数来指定转发的标题和路径。方法实现下拉刷新,使用uni.onReachBottom方法实现上拉加载更多。方法开启页面的分享功能,然后使用uni.share方法设置分享的标题、路径等。组件实现图片的懒加载,将图片的src属性设置为需要加载的图片地址。原创 2023-12-14 16:26:24 · 664 阅读 · 0 评论 -
vue基础入门踩坑备忘
vue设置跳转链接 Vue绑定内联样式 vue中v-show 和 v-if 控制元素显示隐藏的技巧原创 2023-11-23 18:17:13 · 278 阅读 · 0 评论 -
vue实现鼠标经过显示悬浮框效果,使用Vue的v-show指令和CSS的:hover伪类,利用Vue的数据绑定
在上面的代码中,我们在组件的data选项中定义了一个名为showTip的数据属性,并将它的初始值设置为false,表示悬浮框默认是不显示的。在模板中,我们使用@mouseover和@mouseleave监听鼠标经过和离开事件,然后修改showTip的值来控制悬浮框的显示和隐藏。利用Vue的数据绑定,实现鼠标悬浮时显示悬浮框,鼠标移开时隐藏悬浮框的效果。如果需要实现多个鼠标悬浮框效果,可以在组件中添加多个showTip属性,并使用不同的名称来控制各自的悬浮框显示和隐藏。步骤二:为悬浮框添加样式。原创 2023-11-13 17:19:08 · 4674 阅读 · 0 评论 -
Vue中引入jQuery两种方式可在vue中引入jQuery
Vue中引入jQuery两种在vue中引入jQuery的方式原创 2023-10-09 10:19:29 · 7093 阅读 · 0 评论 -
npm安装心得(依赖库Python及node-sass依赖环境)
(据自己的node版本来更新npm 版本npm -g install npm@6.14.8 ,如果仍然报错,依旧显示npm 不支持这个版本 ,这说明npm存在旧的npm缓存,还是旧的npm 环境。(通过npm指令安装对应版本的python(建议方式): npm install --global --production windows-build-tools)(可能是node.js的版本和node-sass的版本不符,就是卸掉原来的node.js,下载一个符合node-sass版本的node.js)原创 2023-09-21 22:22:50 · 5546 阅读 · 0 评论 -
图片转base64格式返回给前端,前端如何展示?
base64, base64编码的Javascript代码。base64,图片的base64" />base64, base64编码的icon图片数据。base64, base64编码的jpeg图片数据。base64, base64编码的gif图片数据。base64, base64编码的png图片数据。base64, base64编码的HTML代码。base64, base64编码的CSS代码。data:text/javascript, Javascript代码。data:text/css, CSS代码。原创 2023-02-27 17:01:16 · 7137 阅读 · 0 评论 -
apache压力测试工具ab进行并发测试(可用于DOS攻击?)
ab是apache自带的一个很好用的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab 我们可以模拟100个并发用户,对一个页面发送1000个请求:原创 2023-02-02 17:19:52 · 648 阅读 · 0 评论 -
CSS media属性的使用-兼容不同设备不同屏幕宽度的写法
为了兼容不同设备排版问题,使用media属性对不同屏幕宽度的设备赋予不同的css值原创 2022-11-18 15:24:17 · 1833 阅读 · 0 评论 -
JS&JQuery之Validform验证 框架详解
Validform是另外一种表单验证框架,也是基于jQuery框架,用法比较灵活。原创 2022-07-01 12:20:05 · 391 阅读 · 0 评论 -
用JS或者jQuery监听 浏览器窗口大小的变化事件
$(window).resize(function(){ $('#topmsg').html( $(window).width()+'x'+$(window).height()); });$(window).resize(function() {//当浏览器大小变化时alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度alert($(docu...原创 2022-03-30 15:21:04 · 1350 阅读 · 1 评论 -
php+nginx配置通过服务端配置解决ajax请求跨域问题(本人亲测)
服务端解决前端JS Ajax请求的跨域问题:如果还是有JS报错,页面跳转报错,例如: This request has been blocked; the content must be served over HTTPS原创 2022-03-17 15:51:49 · 1918 阅读 · 0 评论 -
JQuery获取浏览器窗口的高度和宽度
$(window).height(); //浏览器时下窗口可视区域高度$(document).height(); //浏览器时下窗口文档的高度$(document.body).height();//浏览器时下窗口文档body的高度$(document.body).outerHeight(true);//浏览器时下窗口文档body的总高度 包括border padding margin$(window).width(); //浏览器时下窗口可视区域宽度$(document).width(...原创 2021-12-16 12:07:39 · 1567 阅读 · 0 评论 -
js获取视频长度的3种方法
基本选择框:<div class="form-group col-sm-12"> <label class="control-label">获取时长1。。。。</label> <input class="form-control" type="file" id="test" οnchange="getTime()"></div>获取方式:第一种,监听onloadedmetadata :functi...原创 2021-11-15 12:30:55 · 12125 阅读 · 0 评论 -
PHP实现一次性多张图片上传功能 multiple=“multiple”
分类专栏: PHP 文章标签:版权最近遇到一个需求,就是多张图片上传,按住Ctrl键能选择多张图片一次性上传,上传成功后数据库保存图片的路径及图片原来的文件名。该功能一般在比较成熟的内容编辑器插件中有,今天特意挑出来给大家讲讲,下面在本地环境给大家演示。总共三个文件index.html、conn.php、upload.phpindex.html文件<html><head>上传文件</head><body> <form method="po原创 2021-05-12 18:11:50 · 1292 阅读 · 1 评论 -
window.URL.createObjectURL 的使用预览本地视频及图片
window.URL.createObjectURL可以用于在浏览器上预览本地图片或者视频在预览视频时,我一直将以为将window.URL.createObjectURL生成的URL,赋给video中的source标签是可以的,结果是不行的,得不到视频,如下图需要将其赋给video标签才行,如下图像腾讯,优酷都是这么做的,没有使用source标签,如下图(只不过不是本地视频)预览视频代码 $(“input”).change(function(){var f原创 2021-05-12 17:28:52 · 1215 阅读 · 0 评论