- 博客(27)
- 收藏
- 关注
RSS订阅
原创 项目中常用正则（手机号、身份证、金额等）
包含0的正整数/^([1-9]\d*|[0]{1,1})$/不包含0的正整数/^[1-9]+\d*$/金额。最多两位小数/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/身份证验证/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/手机号码/^[0][1-9]{2,3}
2020-05-15 10:08:09
422
1
原创 vue组件化通信之兄弟组件传值
vue组件化通信之父向子请点击查看vue组件化通信之子向父请点击查看在vue中兄弟节点传值一般有两种方法：$parent和$root， 建议使用前者 使用$parent**parent.vue**<template> <div> <childTest></childTest> <anotherChildTest>&l...
2020-04-30 10:03:07
397
原创 关于axios请求报400如何获取报错信息
不废话，直接放代码addGoods(product).then(res => { if (res.code == 200) { this.$message.success("添加成功"); this.handleFilter(); } else { this.$message.error("添加失败...
2020-04-29 13:56:05
2965
1
原创 vue的slot作用域插槽使用案例
slot的使用场景：复用子组件的slot，且slot的内容不同简单使用案例子组件 <div> <h1>子组件</h1> <slot name="child" msg='德玛西亚'></slot> </div>父组件 <HelloWorld> <p slot-scope='child'...
2020-04-28 11:35:58
577
原创 关于element框架的el-image点击后，页面出现卡死等情况的解决方式
当el-image标签被添加时，页面的body就会自动添加style属性所以我们绑定一个点击事件删除样式就可以了<el-image style="width: 100px; height: 100px" :src="scope.row.logo" fit="scale-down" @click="cancelStyle()"/>cancelStyle() { document.body.style = null },...
2020-05-15 10:51:34
2845
1
原创 vue组件化通信之子向父传值
vue组件化通信之子向父请点击查看vue中子向父传递消息一般使用$emit，方法比较简单，直接看代码父组件<template> <div> <childTest @msg='myMsg'></childTest> {{msg}} </div></template><script> impo...
2020-04-29 09:45:59
149
原创 vue组件化通信之父向子传值
父向子组件传值使用props进行传值parent.vue <template> <div> <childTest :msg='msg'></childTest> </div></template><script> import childTest from './childTest.vue...
2020-04-27 16:44:40
170
原创 Vue 跳转相同路由携带不同参数，而页面不刷新
由于组件是复用的，若要对路由参数的变化作出响应的话，就需要使用 watch（监测变化） $route 对象 created() { this.listQuery.code = this.$route.query.id; this.getList(); }, watch: { $route(to, from) { //当参数改变时就会触发比方法，以此达到数...
2020-04-26 16:01:24
1180
原创 使用vue的sync修饰符进行子父组件的数据绑定
官方文档父组件代码<template> <div> <input type="button" value="我是父组件的按钮" @click="show" /> <!-- 在需要子组件修改的数据后加上.sync即可 --> <child :isShow.sync='isShow' v-...
2020-04-26 11:16:40
110
原创 ES6使用object的is()方法比较两个值
此前js比较值，一般使用== 或 === 符号，我之前倾向使用后者===，因为可以避免比较时触发强制类型转换，但某些情况使用 === 依然有问题，比如再比较NaN ===NaN时，返回的是false，需要使用isNaN()才能正确比较，在ES6引入了Object.is() 弥补了 === 的不准确运算，Object.is() 接受两个参数，若参数的类型相同且值相同，则返回true con...
2020-01-02 11:18:06
528
原创 js防篡改对象之冻结对象
const person = { name: '啦啦德玛西亚', _job: '无业' } Object.defineProperty(person, 'job', { get: function() { return this._job }, set: function(newValue) { this._job = ...
2019-12-25 11:28:31
208
原创 防篡改对象之密封对象
const person = { name: '啦啦德玛西亚' } console.log(Object.isExtensible(person))// true console.log(Object.isSealed(person))// false // 使用Object.seal()将对象修改为密封对象 // 密封对象不可扩展，而且已有成员...
2019-12-25 11:05:55
150
原创 js防篡改对象之不可扩展对象
const person = { name: '啦啦德玛西亚' } console.log(Object.isExtensible(person))//true //使用Object.preventExtensions()可以将对象修改为不可扩展对象，无法再给对象添加属性和方法 Object.preventExtensions(person) ...
2019-12-25 10:53:04
338
原创 最安全的js类型检测
众所周知js内置的类型检测机制不可靠，比如typeof操作符，对于正则和数组检测时返回值都是object， 而使用instanceof检测类型时，虽然可以对正则和数组正常验证，但验证undefined会报错，还有对于Symbol无法验证，/* 安全的类型检测 */const typeChecking = {}typeChecking.isArray = function(value) ...
2019-12-24 15:39:53
171
原创 px、em、rem、vm、vw 、vh、vmin 、vmax区分
Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font...
2019-12-20 10:42:20
1097
原创 elemnt的Table 表格使用注意事项
elemnt的Table 表格使用注意事项1、修改数据<template slot-scope="scope"> <el-button size="mini" @click='updatePassword(scope.row)'>修改密码</el-button> <el-button size="mini" @click='resetPasswor...
2019-12-13 10:21:49
342
原创 pc浏览器内核详解
浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。四大内核：1、Trident内核，也称IE内核。2、Webkit内核。3、Gecko内核。4、Presto内核。各浏览器...
2019-12-04 17:37:16
180
原创 断言assert使用方法
测试代码 console.log('开始') console.assert(true, 'true') console.assert(false,'false') console.log('结束')结果可以发现：assert方法中，第一个参数是判断条件，当为true时，不执行 。当为false时，输出后面提示内容且我们可以发现，assert报错时，不影...
2019-11-03 12:36:41
257
原创 js中的Object.create(null) 和 {} 的区别
console.log(Object.create(null)) console.log({})结果图根据结果我们不难发现，两者最大区别在于Object.create(null)创建的对象没有继承Object 所有Object.create(null)创建的对象也没有Object提供的方法，是一个非常纯净的对象...
2019-10-31 16:00:40
670
原创 js_组合继承(最常用的继承方式)
<script type="text/javascript"> //组合继承: 将原型链和借用构造函数的技术组合在一起 //使用原型链实现对原型方法的继承 //使用构造函数实现对实例属性的继承 //js中最常用的继承方式 //super:超类 function SuperType(name) { //超类属性 //使用构造函数实现...
2019-10-25 15:56:30
251
原创 学习《css世界》笔记之使用overflow做文字溢出点点点效果
效果图HTML <p class="p1">qwertyuiopasdfghjklzxcvbnm</p> <div class="d1"> <p> 冯塘村过去经济较为落后。几年前，镇里以400多年的冯塘古村为基础，引来社会资金投资休闲农庄和共享民宿，把这里建设成了一个集生态农业、创意农业、旅游观光、休闲体验、果蔬采摘、农产品生产加工...
2019-10-11 11:02:11
545
原创 学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐
效果图HTML<p>请选择<i class="icon-arrow"></i></p><p>请选择<i class="icon-arrow valing-1"></i></p><p>请选择<i class="icon-arrow valing-2"></i>...
2019-10-09 15:45:27
168
原创 学习《css世界》笔记之多行文本实现垂直居中
效果图HTML<div class="box"> <div class="content"> 具有行高实现的多行文字垂直居中效果，需要属性vertical-align帮助 </div></div>CSS .box{ width: 200px; line-height: 120px; bac...
2019-10-09 15:18:35
129
原创 学习《css世界》笔记之content自动添加开启闭合符号
实例HTML <p lang="zh"><q>啦啦德玛西亚</q></p> <p lang="en"><q>This book is very good!</q></p> <p lang="no"><q>denne bog er fantasisk!</q&...
2019-09-27 11:35:40
103
原创 学习《css世界》笔记之loading三点动画效果
动画实例HTML<div>正在加载中<span>...</span></div>CSSspan { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -0.25em;/* 属性设...
2019-09-27 11:15:04
823
原创 使用css优雅解决文字两端对齐的方式之一
效果图HTML <body> <div>学校</div> <div>班级</div> <div>班主任</div> <div>上课时间</div> <div>名字</div> </body>CSSdiv { margi...
2019-09-26 14:58:44
221
原创 学习《css世界》笔记之使用css实现凹凸效果
显示效果HTML<span class="ao"></span><span class="tu"></span>CSS .ao, .tu{ display: inline-block; width: 0; font-size: 14px; line-height: 18px...
2019-09-26 11:29:08
598
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人