![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习篇
Yongqiang Chen
前端,能用一个叫Vue的框架
展开
-
Vue里定义方法:通过子节点ID查找所有关联的父节点ID
【代码】Vue里定义方法:通过子节点ID查找所有关联的父节点ID。原创 2023-03-30 13:35:34 · 1308 阅读 · 0 评论 -
Vue 获取当前页面Url路径上的参数
Vue页面methods里定义方法,获取当前页面Url路径上的参数原创 2023-02-28 16:23:32 · 2147 阅读 · 0 评论 -
JavaScript验证一张图片链接是否有效(JS验证图片链接是否有效)
JavaScript验证一张图片链接是否有效(JS验证图片链接是否有效)原创 2023-02-28 15:46:57 · 1501 阅读 · 0 评论 -
Vue使用el-input框输入文本正则匹配(正则表达式)版本号?
Vue使用el-input框输入文本正则匹配(正则表达式)版本号?原创 2022-04-14 11:02:41 · 3325 阅读 · 0 评论 -
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 · 1454 阅读 · 0 评论 -
常用的前端JavaScript方法封装
常用的前端JavaScript方法封装转载 2021-11-25 13:55:19 · 279 阅读 · 0 评论 -
在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 · 10763 阅读 · 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 · 9441 阅读 · 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 · 810 阅读 · 0 评论 -
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 · 1581 阅读 · 0 评论 -
JavaScript 字符串对象 (JS 里字符串有哪些API?)
字符串对象:作用:String对象用于处理文本(字符串) 创建: var str = "abc"; var str = new String("abc"); 包装对象(装箱、拆箱)——了解 JS中能够自动将基本类型包装成对应的包装对象,使用完毕后自动还原。 字符串也可以看作是一个数组,数组的元素是一个一个的字符。API: 属性:...原创 2021-08-27 00:23:32 · 487 阅读 · 2 评论 -
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 · 2354 阅读 · 1 评论 -
export ,export default 和 import 区别,以及用法(export default和export的区别)
说一个简单的话题,新手刚接触导入导出的时候,export和export default傻傻分不清,下原创 2021-08-25 00:19:02 · 1156 阅读 · 0 评论 -
HTML input框和textarea框修改placeholder里面字体颜色大小
有时候项目整体主题是偏暗色的,那么此时原来的input框和textarea框在暗色主题下就显的很不好看。这时发现input框和textarea框的其他样式都很容易改,就placeholder的样式最容易被忽略。当想改placeholder的样式时发现f12元素审查,找了半天都找不到在哪看placeholder的原始样式,其实要改placeholder的样式很简单,input框修改placeholder里面字体颜色大小(textarea框同样使用):input::-webkit-input-placeh原创 2021-08-24 18:35:11 · 1578 阅读 · 0 评论 -
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 · 24910 阅读 · 3 评论 -
Vscode (Visual Studio Code) 常用的快捷键(折叠/展开/格式化/上移...)
使用Vscode很长时间了,常常想提高编码速度,于是把自己总结的几个常用快捷键分享给大家。靓仔!你的点赞和收藏就是我更新博客的动力!!!折叠:ctrl+k,ctrl+0展开:ctrl+k,ctrl+j自动格式化:ctrl+k,ctrl+f自动换行:alt+z上移整行:alt+↑下移整行:alt+↓向上复制整行:shift+alt+↑向下复制整行:shift+alt+↓删除整行:ctrl+shift+k大家可以新建一个demo.html在Vscode里多练习几遍上面的命原创 2021-08-18 19:08:34 · 2814 阅读 · 0 评论 -
Vue 利用extend在父组件内动态注册子组件
前言:我在上家公司遇到一个需求,就是有一个组件库现有四十多个组件,未来可能还会更多。它们都是渲染到同一个位置,但是根据项目场景不同一次只会用到组件库里的某几个组件。如果我将组件全部引入进页面,那将是庞大的体力活,而且后续追加组件我还得来改代码。最后找到了动态注册组件的方式,每次根据后端返回的参数动态加载需要的组件。我就是根据下面的一个例子来实现自己需要的功能的,例子:<template> <div class="testPage"> <Button原创 2021-08-18 18:53:12 · 847 阅读 · 0 评论 -
CSS 文字模糊效果 毛玻璃效果 多重边框效果
文字模糊效果只需要添加以下两行代码,即可达到将文字模糊处理的目的:color: transparent;text-shadow: #111 0 0 5px;毛玻璃效果其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性。但是要做一个好的毛玻璃效果,需要注意很多细节。下面提供一个简单示例:.blur { display: block; width: 300px; height: 300px; ma..转载 2021-08-17 21:45:44 · 1929 阅读 · 0 评论 -
JS驼峰命名转下划线命名,下划线命名转驼峰命名
下划线转换驼峰function toHump(name) { return name.replace(/\_(\w)/g, function(all, letter){ return letter.toUpperCase(); });}驼峰转换下划线function toLine(name) { return name.replace(/([A-Z])/g,"_$1").toLowerCase();}...原创 2021-08-17 21:31:09 · 347 阅读 · 0 评论 -
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 · 396 阅读 · 0 评论 -
JS 里 mouseover 和 mouseenter 有什么区别
mouseover当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡的过程。而经过绑定mouseenter的元素时,只会在鼠标刚进入的时候触发,当进入其子元素的时候,是不会再触发的了。...原创 2021-08-12 09:40:47 · 186 阅读 · 0 评论 -
如何画一条0.5px的边(细线)
理论上1px已经是最小单位了,那如何画一条0.5px的线呢解决办法:1.移动端,使用meta viewport 的方式<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>要记得viewport只针对于移动端,只在移动端上才能看到效果,缩放到原来的0.5倍,如果是1px那么就会变成0.5px2.采用transfo原创 2021-08-12 09:21:53 · 849 阅读 · 0 评论 -
设置css使文字不能被选中
定义类名"no-select",在需要使用不能被选中的地方添加该类名.no-select{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}...原创 2021-08-11 19:39:18 · 441 阅读 · 0 评论 -
vue里盒子高度随浏览器高度变化而变化
a.封装绑定事件和解绑事件/** * @description 绑定事件 on(element, event, handler) */export const on = (function () { if (document.addEventListener) { return function (element, event, handler) { if (element && event && handler) { el原创 2021-08-11 16:57:04 · 652 阅读 · 0 评论 -
JS防抖(Debouncing)和节流(Throttling)
scroll 事件本身会触发页面的重新渲染,同时scroll事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作,例如 DOM 操作就不应该放在事件处理中。针对此类高频度触发事件问题(例如页面 scroll ,屏幕 resize,监听用户输入等),下面介绍两种常用的解决方法,防抖和节流。防抖(Debouncing)防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。通俗一点来说,看看下面这个简化的例子://..转载 2021-08-10 09:41:43 · 232 阅读 · 0 评论 -
在vue里面怎么获取当前浏览器名称
//封装方法export const getExplorer = () => { const ua = window.navigator.userAgent const isExplorer = (exp) => { return ua.indexOf(exp) > -1 } if(isExplorer('MSIE')) return 'IE' else if(isExplorer('Firefox')) return 'Fire.原创 2021-08-10 09:17:38 · 729 阅读 · 0 评论 -
vue里怎么使用event bus (vue里怎么使用事件总线)
vue里怎么使用event bus (vue里怎么使用事件总线),示例:第一种方式://新建bus.vue<script> import Vue from 'vue' export default new Vue({ name: 'bus', data(){ return {} } })</script>//在vue文件里使用import Bus from './bus原创 2021-08-09 09:20:36 · 227 阅读 · 0 评论 -
css设置文字阴影
css设置文字阴影,示例:text-shadow: 0.025rem 0.025rem rgba(179, 94, 85, 0.3);第一个是左右偏移量;第二个是上下偏移量;原创 2021-08-09 09:06:44 · 474 阅读 · 0 评论 -
vue全局修改设置滚动条样式
【代码】vue全局修改设置滚动条样式。原创 2021-08-09 09:03:28 · 2384 阅读 · 0 评论 -
在地址栏里输入一个 URL,到这个页面呈现出来,中间会发生什么?
输入 url 后,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻 找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存---->系统缓存---->路由器缓存,缓存中没有则查找系统的 hosts 文件中是否有记录,如果没有则查询 DNS 服务 器,得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号,构造一个 http 请 求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数 据,并将这个 http 请求封装在一个 tc原创 2021-08-06 11:15:49 · 235 阅读 · 0 评论 -
Vue里怎么使用socket?(websocket)
第一步:封装socket.jsimport { Message } from 'iview';class Socket { constructor (wsurl, binaryType){ this.wsurl = wsurl this.websock = null this.binaryType = binaryType this.initWeb...原创 2021-08-06 10:15:53 · 3306 阅读 · 1 评论 -
文本超出隐藏,并显示省略号(...)
文本超出隐藏,并显示省略号(...),示例:只显示一行:overflow: hidden; //超出的文本隐藏text-overflow: ellipsis; //溢出用省略号显示white-space: nowrap; //溢出不换行显示多行:overflow: hidden;text-overflow: ellipsis; //溢出显示省略号display: -webkit-box; //弹性盒-webkit-box-orient: vertical; //上下垂直排原创 2021-08-05 16:22:48 · 349 阅读 · 0 评论 -
CSS border设置虚线可调节虚线间距
border设置虚线可调节虚线间距,示例:width:100%;height: 1px;background-image: linear-gradient(to right, rgb(101, 44, 194) 0%, rgb(216, 19, 19) 50%, transparent 50%);background-size: 80px 1px;background-repeat: repeat-x;原创 2021-08-05 16:08:21 · 6758 阅读 · 0 评论 -
让一个盒子上无点击事件可以用css里的pointer-events
让一个盒子上无点击事件可以用css里的pointer-events,示例:.music-bar{ &.disable{ pointer-events: none; opacity:0.6;}}原创 2021-08-04 10:43:53 · 372 阅读 · 0 评论 -
运行apache-tomcat需要Java环境,Java环境变量配置
1.先安装jdk,例如:jdk-8u181-windows-x64.exe2.按照步骤:计算机---->属性---->高级系统设置---->高级---->环境变量---->系统变量(新建)填写内容: 变量名:JAVA_HOME 变量值:java安装好的路径(默认的C:\ProgramFiles\Java\jdk1.8.0_181)3.新建好以后在系统变量里找到Path,操作步骤:选中Path----...原创 2021-08-04 10:36:55 · 574 阅读 · 0 评论 -
程序员经典语录
A person should have a strong will, or he will achieve nothing (一个人要有坚强的毅力,否则他将一事无成)Invest Regularly in Your Knowledge Portfolio (定期为你的知识资产投资)Critically Analyze What You Read and Hear (批判的分析你读到...原创 2018-08-09 11:31:29 · 803 阅读 · 0 评论