- 博客(91)
- 收藏
- 关注
RSS订阅原创 Vue3的多根节点组件与父子组件之间的事件继承
Vue.js 3.x 版本不再对组件的 template 选项进行“唯一根节点”的限制，而是允许 DOM 结构具备多个根节点，即下列结构的全局组件在 Vue.js 3.x 版本中是允许的。
2024-09-04 16:45:29
1430
原创 Vue 3 组合式 API
也就是组件是按照不同的选项来进行规划的，而不是按照组件的功能组成来进行规划的。版本的新增语法，该语法可以在大型组件中按照组件的各个功能对代码进行功能区域的划分，这样可以更加方便的管理并维护代码，同时也更好地体现了代码之间的逻辑关系。钩子函数的回调函数中，回调函数是一个使用箭头函数书写的格式。当单击页面中的命令按钮时，无序列表显示另外六个星座的名称。数据进行了侦听，同时使用了侦听属性的immediate 属性，即立即执行的侦听属性特性。➢ 钩子函数的参数是一个回调函数，具体的代码要书写在这个回调函数中。
2024-09-04 16:23:35
1022
原创 组件的自定义事件
父子组件之间的通信，最主流的方法就是前面章节讲解的 props和$emit()方法。父组件通过自定义属性向子组件传递数据，子组件使用 props选项接收父组件传递过来的数据；父组件通过绑定自定义事件接收子组件传递过来的数据，子组件通过 this.$emit()方法调用父组件的自定义事件，来向父组件传递数据。本节针对组件的自定义事件，为读者讲解 Vue.js 3.x 框架中有关组件自定义事件的规定和语法要求。
2024-09-03 10:16:11
931
原创 多级父子组件的通信技术
在一个实际的项目中，一个父组件可能有多层次结构的子组件体系。如果这个父组件要向第三层、第四层甚至更深的子组件传递数据，则要一级一级的通过自定义属性来实现，这显然降低了工作效率。Vue.js 3.x 框架提供了 Provide/Inject 功能来快速实现这种多级父子组件之间的通信技术。在这里，由父组件提供数据，所以父组件被称为“Provide”（供应方），子组件接收数据，所以最组件被称为“Inject”（注入方）。本节就带领读者学习Vue.js 3.x 框架新增的 Provide/Inject 功能。
2024-07-11 14:47:47
762
原创 Vue 项目中 history 路由模式的使用
在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。
2024-07-10 17:02:01
1151
原创 vue element-ui 表格横向滚动条在合计项下方
1.隐藏bodyWrapper滚动条，显示footerWrapper滚动条。在el-table上加上ref=“detailTable”监听footerWrapper滚动条。
2024-04-19 16:07:00
768
原创 js实现数组去重
五、js中数组也是对象，可以根据对象属性的特性。遍历数组，如果该值不是对象的属性，则在对象中添加等于该值的属性，并且同时把该值加入新数组。一、使用数组的indexof方法，如果element的index不相等则说明element相同，则过滤掉。三、遍历两个数组，将原数组的值和新数组的值一一进行比较，如果原数组的值不存在则加入新数组中。四、先将数组进行排序，然后遍历数组，将数组中每个值与其后一个值比较，如果不同则存入新数组。六、双重循环遍历数组，如果值相同，使用splice方法删去后一个相同的值。
2024-03-01 16:01:15
245
原创 js中一些常用的Math方法
Math.floor(n)：返回小于等于n的最大整数。Math.ceil(n)：返回大于等于n的最小整数。Math.random()：返回[0,1)随机数。Math.sqrt(n)：返回n的算术平方根。Math.round(n)：对n四舍五入取整。Math.pow(a,b)：返回a的b次方。Math.cos(a)：返回a弧度的余弦值。Math.tan(a)：返回a弧度的正切值。Math.abs(n)：返回n的绝对值。Math.max()：返回最大值。Math.min()：返回最小值。
2023-07-24 17:38:33
283
原创 axios请求拦截器
axios特性：1、axios 是一个基于promise的HTTP库，支持promise所有的API2、浏览器端/node端（服务器端）都可以使用，浏览器中创建XMLHttpRequests3、支持请求／响应拦截器4、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据5、批量发送多个请求6、安全性更高，客户端支持防御XSRF使用场景通常在出现请求数多的情况下，我们将会用到 axios 的一个API：拦截器。页面发送http请求，很多情况我们要对请求和其响
2023-03-30 11:09:17
929
1
原创 JavaScript 正则表达式详解
正则表达式属于字符串范畴，由两部分组成：原义字符、元字符。1、原义字符：书写在正则表达式中表示为字面意思的字符。2、元字符：书写在正则表达式中表示为特定含义的字符。基本元字符、范围元字符、重复元字符、转义字符、贪婪匹配符、后向引用。1、. 匹配任意字符。2、* 匹配前一个字符出现的次数为0次或多次。3、? 匹配前一个字符出现的次数为0次或1次。4、+ 匹配前一个字符出现的次数为1次或多次。5、^ 匹配以后面的字符开头。6、$ 匹配以前面的字符结尾。7、| 匹配|两端出现的字符中的任意一个，
2022-10-29 14:59:41
404
原创 Vue 2.0与 Vue 3.0的版本区别
Vue.js 2.xVue.js 3.x基本结构let vm=new Vue({data:{//数据区} })Column 1Column 2centered 文本居中right-aligned 文本居右
2022-08-24 17:53:27
1230
1
原创 vue项目防止按钮重复点击调取接口
场景1.保存提交按钮不小心点击了多次。2.由于服务器请求时间过长等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。3.resize、scroll，输入框内容校验等频繁操作。原因由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多
2022-04-12 10:57:51
1705
1
原创 常用正则校验汇总
常用正则校验1、手机号 /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/2、银行卡号校验 /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/3、身份证 /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
2021-12-28 16:44:48
3571
转载 vue-router的实现原理
官网文档，…, 下面这种路由表的写法比较优雅，我把路由单独写在一个文件routes.js .router／routes.js 文件代码const routes = [ { path: '/', redirect: '/recommend' }, { path: '/recommend', component: () => import('../components/recommend/view.vue') }, { path: '/sin
2021-12-21 09:43:02
133
原创 uniapp上传图片转base64
pathToBase64(path).then(base64 => { console.log('类型',typeof(base64.slice(23, base64.length))) this.formImgData.base64Str = base64.slice(23, base64.length); let base64Str = base64.slice(23, base64.length)})js文件/* 处理文件路径 */function getLocalFile
2021-11-20 14:52:27
1268
原创 uniapp点击图片可以多张预览
照片多张预览 全选 多选 删除 长按删除<template> <view> <view class="module-images-box"> <image @click="naviga" v-if="type == 1" class="images-upload-box" src="../../static/images/agrarian/upload_photograph.png" mode=""></image>
2021-11-16 14:19:08
1439
原创 txtarea设置不允许更改大小
vue 项目中设置style="resize:none"会不生效需要在样式里 这么写::v-deep .el-textarea__inner{resize: none;}resize属性值：both（表示横向纵向均可拉动）horizontal（表示只有横向可以拉动）vertical（表示只有纵向才可以拉动）none（禁止拉动）...
2021-10-27 14:46:54
420
原创 vue中this.$forceUpdate()
页面传的数值动态改变，接口接受的参数也就动态更改，但接收的数据有时候不会及时不变，通过this.$forceUpdate()页面强制刷新来解决这个问题
2021-08-31 15:25:09
25344
原创 uni-app 小程序分页 onReachBottom触底加载下一页
//获取试卷列表 getPaperData(){ this.$apiReq.req({ url:'接口', data:{ ...this.params }, method:"get", success:res=>{ if (res.code === 200) { //console.log('列表',res.data) this.paperList = [...this.paperList,...res...
2020-12-17 16:23:10
1673
1
原创 uni H5微信内自定义分享朋友圈/好友带图片 标题
先来看一下对比效果图一：绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。二：引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）
2020-11-20 11:08:09
1763
原创 vue滑块验证登录
滑块样式<template> <div> <el-form :model="form" ref="form" :rules="codeRules"> <el-form-item prop="phone"> <el-input type="tel" :maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input>
2020-11-05 20:47:00
744
原创 虚拟DOM技术（Virtual DOM，VDOM）
VDOM的第一个目的：完成在Vue下实现DOM操作的功能。VDOM的第二个目的：实现比原生的DOM操作还要快的页面渲染机制。VDOM的本质：利用js对象模拟DOM节点。一、利用render函数代替组件中的template：1、render函数的功能：在创建组件是实现DOM结构的生产，和template完全一致。2、格式：Vue.component(‘my-com’,{render:function(createElement){return createElement(‘div’);}/
2020-08-25 11:07:28
759
转载 vue项目配置生产环境和发布环境的接口地址的跨域问题
config>index.js文件夹'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path');module.exports = {//生产环境 dev: { // Paths assetsSubDirectory: 'static', assetsPub
2020-08-24 17:07:08
704
原创 uni-APP项目H5页面scroll-view在苹果浏览器里显示问题
因为苹果浏览器会忽略掉css中的层级关系，所以导致在苹果浏览器上显示会有问题.topArea { position: fixed; overflow: hidden; background: #FFFFFF; z-index: 999; height: 160upx; box-shadow: 0 0 10px #cdcdcd; }
2020-08-08 19:13:15
1568
转载 小程序选择城市，以及实时获取当前城市位置
点击的时候可选择，代码：其中样式是自己写的一个css，你们可以自己写样式，用到了阿里图标index.wxml<!--定位和搜索--> <view class="indexTop display-flex align-center"> <view class="display-flex align-center"> <text class="textColor city" catchtap="switchcity">{{ci.
2020-08-07 09:50:43
661
原创 原生H5页面适配问题
首页meta先加上<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-
2020-07-30 17:37:06
425
原创 JavaScript 正则表达式讲解
正则表达式属于字符串范畴，由两部分组成：原义字符、元字符。1、原义字符：书写在正则表达式中表示为字面意思的字符。2、元字符：书写在正则表达式中表示为特定含义的字符。基本元字符、范围元字符、重复元字符、转义字符、贪婪匹配符、后向引用。一、基本原字符1、**.匹配任意字符2、*匹配前一个字符出现的次数为0次或多次3、？**匹配前一个字符出现的次数为0次或1次4、+匹配亲一个字符出现的次数为1次或多次5、^匹配以后面的字符开头6、$匹配以前面的字符结尾7、| 匹配|两端出现的字符中的任意一个
2020-07-13 14:35:50
292
转载 小程序中本地图片转换成base64地址
我在解决这个转换格式问题时大部分的都是选择手机照片时的转换方法，其中有一种将本地图片转成base64地址的方法，在网站里选择本地图片地址，就可以直接转换base64地址了网站地址http://tool.chinaz.com/tools/imgtobase转载于:https://www.cnblogs.com/Guhongying/p/10801809.html...
2020-07-11 10:16:19
1333
原创 uni-app项目中H5跨域小程序不跨域怎么解决方法（兼容H5、小程序）
解决这个问题的时候还是用到了之前的文章中提到的“条件编译”，当然这只是其中一部分，下面我们来看一下这种问题的解决方法，①H5端配置首先在项目中找到一个名为“manifest.json”的文件，找到该文件下的H5配置将端口配置好然后在左侧菜单栏中再找到“源码视图”将以下代码配置好，至此我们的H5端就配置完成了，需要配置的还有我们的小程序端因为我的项目是兼容H5跟小程序的所以调取接口时还需要分开写也就是“条件编译”②小程序端配置首先我们需要配置一下安全域名打开微信公众平台登录在左侧菜单中
2020-07-08 09:07:13
3942
原创 uni-APP中的三级联动（省市区）
先看一下效果图因为我在做这个的时候数据不需要更改所以就用了一个js文件下面可以看一下代码template部分<view class="input" type="text" placeholder="请选择地区"> <picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex" @change="pickerCha
2020-07-06 10:15:25
16468
13
原创 CSS3实现水波纹扩散效果
效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" /> <title>圆点扩散</title> <style type="text/css"> body
2020-07-06 09:49:52
2283
原创 css3实现点击扩散效果
效果图效果介绍:点击省份所在的六边形时，以当前点击的六边形为中心，边框高亮显示并且实现向外扩散的效果思路解析：点击之后它六个边儿，然后每一个边儿的话，它往上走，一点点的这个描边儿，然后是周围的图片是没有高亮的，这样的话，直接用这个图片儿去实现就可以了，比如说把整张这个高亮的这个图就是以这个为中心，然后往右边儿扩散的，这个图儿整个扣下来，当你点击某一个的时候。你把他这个背景图直接替换成你这个高亮显示的这个描边儿图，然后他最好加一个过渡效果，那你这个时候可以用CSS给他加一个从中间往外扩散的一个，比如
2020-07-06 09:49:36
1931
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人