自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Yongqiang Chen的博客

前端,能用一个叫Vue的框架

  • 博客(62)
  • 收藏
  • 关注

原创 JavaScript 字符串对象 (JS 里字符串有哪些API?)

字符串对象:作用:String对象用于处理文本(字符串) 创建: var str = "abc"; var str = new String("abc"); 包装对象(装箱、拆箱)——了解 JS中能够自动将基本类型包装成对应的包装对象,使用完毕后自动还原。 字符串也可以看作是一个数组,数组的元素是一个一个的字符。API: 属性:...

2021-08-27 00:23:32 489 2

原创 Vscode (Visual Studio Code) 常用插件,编辑vue项目时必备!提高开发效率最低要求的8款插件

在上家公司工作的时候,常去的工作地点就有4个,经常回到原工作地点时发现以前用的那台电脑被别的同事用了,于是又坐在了一台没vscode的电脑面前。每次安装vscode后都不记得需要哪些插件,于是就总结了几个常用的、必备的、满足需求并安装最少插件的插件。No1: Vetur vue代码自动格式化插件,统一代码格式。No2:JavaScript (ES6) code snippets 包含ES6语法中的JavaScript代码段(支持JavaScript和T...

2021-08-19 19:12:50 25273 3

原创 JavaScript 数组API(JS 里数组有哪些API?)

1.添加数组 push(val1, val2, ...) //从末尾添加 unshift(val1, val2, ...) //从开头添加 splice(index, 0, val1, val2, ...) //从指定索引处添加 array[array.length] = value; //向末尾添加一个元素2.删除元素 pop() //从末尾删除一个元素,并返回删除的元素 shift(...

2021-08-16 19:25:15 397

原创 JavaScript(JS)实现姓名脱敏方法

项目里用到了姓名脱敏,记录一下。

2024-02-22 16:59:23 851

原创 前端常见的 http 返回的状态码

只能切换到更高级的协议,例如,切换到 HTTP 的新版本协议 200 OK 请求成功。请求的资源已被永久的移动到新 URI,返回信息会包括新的 URI,浏览器会自动定向到新 URI。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择。505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本,无法完成处理。409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码,服务器处理请求时发生了冲突。

2024-02-22 09:20:24 916

原创 JavaScript(JS) 中实现继承的几种方式

将父类的实例作为子类的原型,他的特点是实例是子类的实例也是父类的实例,父类新增的原型方法/属性,子类都能够访问,并且原型链继承简单易于实现,缺点是来自原型对象的所有属性被所有实例共享,无法实现多继承,无法向父类构造函数传参。为父类实例添加新特性,作为子类实例返回,实例继承的特点是不限制调用方法,不管是 new 子类()还是子类()返回的对象具有相同的效果,缺点是实例是父类的实例,不是子类的实例,不支持多继承。通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用。

2024-02-21 09:59:08 495

原创 说说 Java,JavaScript 这两种语言的区别

Java和JavaScript区别与联系

2024-02-21 09:15:00 531

原创 flex布局青蛙游戏答案(前端CSS弹性布局练习)

#青蛙游戏# flex布局青蛙游戏答案(前端CSS弹性布局练习)

2024-02-20 09:30:00 1002

原创 几个很实用的 BOM 属性对象方法

几个很实用的 BOM 属性对象方法。Bom 是浏览器对象。

2024-02-20 09:29:42 429

原创 GET 和 POST 的区别?

get 比 post 更不安全,因为参数直接暴露在 url 中,所以不能用来传递敏感信息。get 请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留。get 参数通过 url 传递,post 放在 request body 中。get 请求在 url 中传递的参数是有长度限制的,而 post 没有。get 请求会浏览器主动 cache,而 post 支持多种编码方式。post 产生两个 TCP 数据包。get 请求只能进行 url 编码,而 post 支持多种编码方式。

2024-02-19 11:55:39 434

原创 http 和 https 的区别?

http 传输的数据都是未加密的,也就是明文的,网景公司设置了 SSL 协议来对 http 协议传输的数据进行加密处理,简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议,比 http 协议的安全性更高。使用不同的链接方式,端口也不同,一般而言,http协议的端口为80,https的端口为443,http的连接很简单,是无状态的;https 协议的主要作用是:建立一个信息安全通道,来确保数组的传输,确保网站的真实性。

2024-02-19 11:18:11 7281 1

原创 VUE随机洗牌,JS随机排序数组/洗牌函数

VUE随机洗牌,JS随机排序数组/洗牌函数

2024-01-19 14:03:36 942

原创 Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要显示的数据返回来。但是有时候会遇到后端也是去调用了其它系统的接口,这时候返回到前端的是所有的数据,此时需要前端自行去进行分页显示。// 页面初始化时生成100条数据,模拟从后端获取所有数据。// 分页方法(用于表格数据后端不分页,放到前端做分页)--===分页=====-->// 从后端获取到的所有表格数据。/** 切换分页 */

2024-01-19 11:29:22 5026

原创 Web前端-BOM系列之Navigator对象

navigatorLanguage.language 只读 返回表示用户的首先语言,通常是浏览器用户界面的语言。Navigator对象包含有关浏览器的信息,对象包含的属性描述了正在使用的浏览器,可以使用这些属性来进行平台专用的配置。navigator.appVersion 只读,返回一个字符串,表示浏览器的版本。navigator.product 只读,返回当前浏览器的产品名称(如,"Gecko")。navigator.platform 只读,返回一个字符串,表示浏览器的所在系统平台。

2024-01-18 13:35:25 973

原创 Vscode (Visual Studio Code)使用Thief-Book插件看小说摸鱼神器

Vscode (Visual Studio Code)使用Thief-Book插件看小说摸鱼神器,话不多说直接开整:第一步:打开 VS Code 编辑器,在侧边栏中选择“扩展”,搜索并安装 Thief-Book 插件第二步:准备好要看的小说txt文件,需要另存为选一下utf-8格式,否则待会儿文字会乱码第三步:点击扩展设置,将小说绝对路径填入第四步:按下快捷键 Ctrl+Shift+P,打开命令面板,输入Thief-Book,然后任意选择NextBook开启底部状态栏摸鱼模式

2024-01-18 12:46:43 18239 4

原创 CSS清除浮动:(万能清除法)

定义一个类名,使用伪元素:after,并把类名赋给被浮动元素的父级元素。CSS清除浮动:(万能清除法)

2024-01-17 10:41:08 426

原创 JavaScript 用btoa和atob来编码解码Base64

/ 报错:Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. at :1:8。// 输出结果:SGVsbG8gV29yZCE=var str = "Hello, 中国!// 输出结果:Hello Word!// 输出结果:Hello, 中国!

2024-01-17 10:25:23 971

原创 JS获取对象键值对中key、value,以及循环Object中的某一项

1.JS获取对象键值对中key、value。name: "张三",name: "张三",// ["name", "张三"]2.循环Object中的某一项。// ["sex", "男"]// name 张三。

2024-01-15 15:46:28 988

原创 CSS实现元素水平垂直居中几种方案

CSS实现元素水平垂直居中几种方案 方案一:利用 display: inline-block;方案五:利用 display: table-cell;方案六:利用translate位移。方案三:定位法(2)方案二:定位法(1)

2024-01-15 15:19:42 780

原创 JS浏览器的默认行为及阻止行为,阻止右键菜单、阻止超链接跳转、阻止拖拽事件

window.document.oncontextmenu = function(){ // 阻止默认菜单弹出。IE8及以下:event.retrunValue = false;阻止:标准浏览器:event.preventDefault();阻止:return false;阻止:return false;(一)右键菜单事件:oncontextmenu。(三)浏览器的拖拽事件:ondragstart。

2024-01-12 11:22:15 1244

原创 CSS文本超出显示...(省略号)文本超出隐藏,并显示省略号(...)

/ 显示行数(数字可调整)text-overflow: ellipsis;// 溢出用省略号显示。CSS文本超出显示...(省略号)文本超出隐藏,并显示省略号(...)text-overflow: ellipsis;// 溢出显示省略号。// 超出的文本隐藏。

2024-01-12 10:27:57 3568

原创 JS 深克隆(深克隆不考虑函数)深拷贝deepClone

/ 引用值(obj/array)且不为null。likes: ["乒乓", "篮球", "跑步"]// 原始值或func。name: "张三",js封装方法实现深拷贝。2.在页面中引入并使用。

2024-01-11 13:33:52 658

原创 Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable>// 操作按钮组 === label: 文本,show:是否显示,icon:按钮图标,disabled:是否禁用,method:回调方法, 等等。defaultColumns: ["操作", "日期", "姓名", "地址"],totalColumns: ["操作", "日期", "姓名", "地址"],

2024-01-11 11:23:26 6106

原创 Vue 对象删除没有值的项

/ params值为{ pageIndex: 1, pageSize: 10, name: "张三", age: 0 }在调用后端查询接口时,有的要求参数对象里空值的项不要传,这个时候可以封装一个方法在调用接口前将对象过滤一遍。1.新建一个名为tools.js的文件,里面放入以下代码。name: "张三",//对象删除没有值的项。

2024-01-10 14:17:15 975

原创 Vue项目在ie浏览器中显示白屏优化提示

在工作中用到Vue开发项目,用户在IE浏览器打开页面,结果显示空白屏。作为开发者当然知道是浏览器版本过低导致语法不支持,但是用户不知情的情况下显示空白屏就很不友好。var str = "你的浏览器版本太低了,已经和时代脱轨了!var str2 = "推荐使用:谷歌(Chrome)浏览器";

2024-01-10 11:23:21 476

原创 Vue项目里实现json对象转formData数据

平常调用后端接口传参都是json对象,当提交表单遇到有附件需要传递时,通常是把附件上传单独做个接口,也有遇到后端让提交接口一并把附件传递到后端,这种情况需要把参数转成formData的数据,需要用到new FormData()。json对象转formData,一个一个的赋值代码会非常冗余,并且遇到复杂的数据结构,还需要一层一层的往下循环赋值。因此写了一个demo解决当前问题以供参考,写的不好的地方欢迎指正。

2024-01-09 11:17:36 1297

原创 Vue如何根据某个时间值获取当月的最后一天

Vue、JS 根据某个时间值获取当月的最后一天

2024-01-09 10:52:12 1322

原创 正则匹配输入的内容是不是手机号或座机号

【代码】正则匹配输入的内容是不是手机号或座机号。

2023-08-07 14:38:35 207

原创 正则匹配输入的内容是否为正常网址

【代码】正则匹配输入的内容是否为正常网址。

2023-08-07 14:35:40 227

原创 Vue里定义方法:通过子节点ID查找所有关联的父节点ID

【代码】Vue里定义方法:通过子节点ID查找所有关联的父节点ID。

2023-03-30 13:35:34 1337

原创 Vue 获取当前页面Url路径上的参数

Vue页面methods里定义方法,获取当前页面Url路径上的参数

2023-02-28 16:23:32 2156

原创 JavaScript验证一张图片链接是否有效(JS验证图片链接是否有效)

JavaScript验证一张图片链接是否有效(JS验证图片链接是否有效)

2023-02-28 15:46:57 1511

原创 Vue使用el-input框输入文本正则匹配(正则表达式)版本号?

Vue使用el-input框输入文本正则匹配(正则表达式)版本号?

2022-04-14 11:02:41 3340

原创 JS如下数据的二维数组怎么转成带children的多重数组?

数组一:(不限制长度)[["1","1-1","1-1-2"],["1","1-1","1-1-3","1-1-3-1"],["2","2-4","2-4-1"],["2","2-5","2-5-3"]]转换成数组二:[ { code: "1", children: [ { code: "1-1", children: [ { code: "1-...

2022-01-12 15:11:15 1464

转载 常用的前端JavaScript方法封装

常用的前端JavaScript方法封装

2021-11-25 13:55:19 281

原创 在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效

在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效。不用修饰符.trim,使用js的trim方法,在el-input的@blur事件中去除首尾空格

2021-11-25 10:27:43 10798 8

转载 vue elementUI组件表单动态验证失效的问题与解决办法

一、缘由在项目中,有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。二、第一次实现与遇到的问题比如银行卡号根据输入年龄进行判断,如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules,然后通过三元表达式赋值prop属性,实现动态验证,示例如下:<template> <el-form ref="ruleForm" :model="formData" :rules="rules"> <el-form-item

2021-10-15 10:14:58 9464 2

原创 vue element select 多选全选功能

1、html部分<el-select v-model="productLineIds" placeholder="请选择品线" size="small" clearable multiple collapse-tags @change="selectAll" > <el-option v-for="item in productLineOption" :label="item.name" :value="item.id" :key="item.id"></el

2021-10-15 09:50:07 814

原创 JavaScript Math对象 (JS 里Math常用的方法有哪些?)

Math 对象用于执行数学任务。Math 是数学函数,但又属于对象数据类型typeof Math=> ‘object’Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。1.Math.abs()获取绝对值。/**返回一个数的绝对值**/Math.abs(-7.25);//返回值是7.252....

2021-09-17 19:40:34 1593

原创 Vue项目中该怎么引入图片(vue项目中图片的引用方式)

1.在vue项目中使用require的方式引入图片//home.vue文件<template> <div class='home'> <img :src="img.save"> </div></template><script>export default { name: 'home', data () { return { img

2021-08-25 21:06:37 2355 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除