web前端
关注
分享
扫一扫
依古比古*
学啥啥不行，吃饭第一名
展开
-
获取当前url参数并跳转指定链接拼接参数
<template> <div class="app-container"> 当前浏览器url的参数 {{ params }} <el-button @click="goSubSystem"> 登陆</el-button> </div></template><script>export default { name: "subSystem", data() { return原创 2022-04-26 15:18:45 · 952 阅读 · 0 评论 -
echarts 柱状图名称显示不全问题
代码附赠如下 const barChart = echarts.init(indexChart.value); // barChartOptions 配置项，推荐放在外部引入。 resizeChart(indexChart.value, barChart, state.obj.option); var div = document.createElement("div"); div.clas.原创 2022-02-11 17:25:10 · 1545 阅读 · 0 评论 -
跨网段校验 实现地址IP比较大小（终止IP大于起始IP）
思路笔者在听到这个需求后表示很懵，了解过后才知道是 地址对象 在选择范围的情况下，终止IP 是需要大于起始IP的，那么在跨网段的情况下该如何比较呢在这里，笔者有两种思路。1.第一种 大概是 大家脑子里会不由自主的想到通过 字符串分割ip 地址 来比较数组前三位的方法如果前三位都符合的话 那么再去比较最后一位。如果最后一位 的大小符合逻辑，那么校验通过当然 如果 前三位不相等 就属于跨网段 我们还需要去比较 网段大小2.第二种：说起来第二种了 也是受了旁边那位同事的启发 在其帮助下实现了这个原创 2021-12-29 15:14:08 · 2346 阅读 · 3 评论 -
js校验字符长度（中文占据三个，英文占据一个）
js校验字符长度（中文占据三个，英文占据一个）export const checkServiceDesc = (rule, value, callback) => { var len = 0; for (var i = 0; i < value.length; i++) { var c = value.charCodeAt(i); //单字节加1 if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <原创 2021-11-23 17:51:21 · 1762 阅读 · 0 评论 -
js正则校验文件路径（Windows，linux）
js正则校验文件路径（Windows，linux）亲测好用！！windows 路径校验如下/^[a-zA-Z]:((\\)[\S].+\s?)*\\$/Linux路径校验如下/^\/([\u4E00-\u9FA5A-Za-z0-9_]+\/{1})+$/原创 2021-11-23 17:46:19 · 6200 阅读 · 1 评论 -
vue-cli4.0搭建
vue.js越来越火爆.更多的项目vue进行开发,实际开发搭建开发脚手架.html css javascript node.js环境(npm包管理工具) webpack构建工具webpack是一个静态资源构建，打包的工具1.安装node.js2.版本10.0.0以上 默认c盘可下载淘宝镜像 比较稳定 也可以使用yarn二:安装vue-cli脚手架构建工具cnpm install -g @vue-cli 全局安装vue -V查看版本 3.0为4.5.6创建vue3.0项目vue cre原创 2021-08-01 18:36:59 · 1677 阅读 · 0 评论 -
Module build failed (from ./node_modules/eslint-loader/index.js)
Module build failed (from ./node_modules/eslint-loader/index.js)昨天在Git上拉代码时候 ，在进行npm install 之后报了这个一个错！在经过了 不断地删除 安装依赖之后还是不行，最后发现了一个问题：那就是我们需要 降低babel-eslint的版本，直接安装下来的是10.*.*以上的版本，我们需要安装到稳定版本下载指令npm install babel-eslint@7.2.3 即可 ，启动项目！完事...原创 2020-10-28 10:51:17 · 1877 阅读 · 0 评论 -
× eslint --fix found some errors. Please fix them and try committing again.
解决git push提交代码之前代码规范问题现在可以说是大多数公司都开启了代码规范问题，有良好的编码习惯是程序员必备！！拒绝垃圾代码 丑恶代码！！！今天小编在提交的时候报了这样一个错`×eslint --fix found some errors. Please fix them and try committing again.`只需要输入 git commit --no-verify -m "提交时的注释"...原创 2020-07-31 17:53:20 · 4753 阅读 · 0 评论 -
vue中elementui的el-input实现中文和英文的正则校验
vue中elementui的el-input实现中文和英文的正则校验在我们写后台管理的时候难免要自定义一些校验的规则，比如说标题必须是中文的，组件名必须是英文的。而如果这个时候，输入框已经是封装好的，我们该咋样去修改实现呢？今天小编也是搞了一个下午出来了代码分享给 大家！！仅供参考页面中代码 <!-- 菜单标题 --> <el-form-item label="菜单标题" prop="title"> <el-input原创 2020-07-27 19:07:21 · 8307 阅读 · 0 评论 -
js实现蜘蛛网效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</ti原创 2020-06-22 00:08:00 · 1255 阅读 · 0 评论 -
Vue 中methods，computed watch的区别
Vue 中methods，computed，watch的区别methodsmethods中定义的都是具体的方法，根据一些触发条件，调用一次，重新执行一次。比如说点击事件<template> <div> <!-- 调用一次，执行一次 --> <div @click="onClick"> </div> </div></template>原创 2020-06-20 01:19:47 · 241 阅读 · 0 评论 -
javascript实现贪吃蛇小游戏
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>贪吃蛇</title><script> var map; //地图类对象 var snake; //蛇类对象 var food; //食物类对象 var timer; //定时器对象 var sum=0; //分数 //地图类 functi原创 2020-06-18 23:42:21 · 319 阅读 · 0 评论 -
JavaScript实现随机点名器功能
js实现点名器功能代码： - css样式 <style> .box{ width: 350px; height: 300px; background-color: antiquewhite; margin: 0 auto; text-align: center; } #names{ width原创 2020-06-18 00:39:07 · 914 阅读 · 0 评论 -
jQuery实现轮播图
jQuery实现轮播图学习了js原生实现轮播图，今天我们尝试用jQuery库来实现，给你不一样的感觉。上代码！！！HTML中：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http原创 2020-06-16 15:55:38 · 1190 阅读 · 0 评论 -
jQuery实现拖拽
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title原创 2020-06-15 22:56:09 · 929 阅读 · 0 评论 -
js原生实现购物车功能
js原生实现购物车功能功能实现：1. 用JavaScript实现静态购物车功能2. 点击+号数量增加，点击-号数量递减；3. 实现全选、反选和删除功能；4. 求出小计、总数量和总价；效果图献上：上代码：css中：<style> table{ width: 900px; border-collapse: collapse; margin: 0 auto; }原创 2020-06-12 23:48:10 · 724 阅读 · 0 评论 -
javascript事件冒泡和事件捕获及事件代理
一：什么是事件？事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用 跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进 行某些类型的交互时，事件就发生了。 事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘 上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面 加载完成，或者是用户滚动窗口或改变窗口大小。二：什么是事件流？事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网 景（Netscape）开发团队原创 2020-06-04 23:09:18 · 230 阅读 · 0 评论 -
Javascript原生的DOM操作方法
Javascript的DOM操作方法原生js5中操作dom一共是有三种方法：第一种：标签式的绑定（HTML事件处理）第二种：DOM0级事件处理第三种:DOM2级事件处理但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。 但是跟随时代发展潮流的同时，我们也不能忘记了原生！！！补充一个面试题vue 和jQuery最大的区别：jQuery：是一个操作DOM的神奇，我们可以通过$(),ajax $().get等vue呢 是数据驱动组原创 2020-06-03 22:23:08 · 602 阅读 · 0 评论 -
vue移动端实现滚动到顶部
<template> <div class="home"> <div @scroll="scroll()"> <div v-for="(item,index) in this.list" :key="index" class="every">{{item}}</div> </div> <div class="scrolltop" v-show="isShow" @click="goTop"&原创 2020-05-31 14:35:59 · 2316 阅读 · 0 评论 -
vue递归组件实现树形结构
vue递归组件实现树形结构一：递归组件什么是递归组件？简单来说就是在组件中内使用组件本身。函数自己调用自己。很多情况下我们呢刷数据的时候，不知道到底这个数据结构是有多少层，那么这个时候我们就用到了递归来实现。二：先用for来遍历：父组件中：<template> <div class="home"> <tree :title="list.name" :list="list.children"></tree> </div>原创 2020-05-29 13:08:03 · 4588 阅读 · 0 评论 -
vue.js之filters的使用（过滤器）
vue.js之filters的使用（过滤器）**过滤器：**对我们渲染出来的数据进行进一步的格式化处理。 例如：后台返回的数据性别是0和1 ，渲染页面的时候，我们应该转换成“男”或者“女”，在这种情况下呢，我们就需要用到了过滤器，还有一点就是商品价格的读取出来的是普通的数值，比如：258964，我们需要在前面添加一个货币符号或者是千分分隔符，变为：￥250，都需要用到了过滤器。过滤器分为两种：全局过滤器，局部过滤器全局过滤器使用：<template> <div class原创 2020-05-28 16:25:56 · 931 阅读 · 0 评论 -
前端高频面试题总结（三）
一：js的作用域？JS作用域也就是JS识别变量的范围，作用域链也就是JS查找变量的顺序先说作用域，JS作用域主要包括全局作用域、局部作用域和ES6的块级作用域全局作用域：也就是定义在window下的变量范围，在任何地方都可以访问，局部作用域：是只在函数内部定义的变量范围块级作用域：简单来说用let和const在任意的代码块中定义的变量都认为是块级作用域中的变量，例如在for循环中用let定义的变量，在if语句中用let定义的变量等等注：尽量不要使用全局变量，因为容易导致全局的污染，命名冲突，原创 2020-05-26 22:21:53 · 550 阅读 · 0 评论 -
Vue.nextTick的实现原理以及使用场景
Vue.nextTick的实现原理以及使用场景定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，所以放在 Vue.nextTick()回调函数中的执行的应该是会对 DOM 进行操作的 js 代码；理解：nextTick()，是将回调函数延迟在下一次 dom 更新数据后调用，简单的理解是：当数据更新了，在 dom 中渲染后，自动执行该函数，<template> <div class="hello"> <原创 2020-05-25 22:58:20 · 828 阅读 · 0 评论 -
vue组件传值（vue组件通信）的几种方式
vue组件传值（vue组件通信）的几种方式我们接触了vue.js 之后，组件化的开发 不得不让我们用到传值。一：父传子（props）具体实现：父组件通过import引入子组件，并注册，在子组件标签上 添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组 形式[‘要接收的属性’]，二是通过对象形式{}来接收，对象形式可以设 置要传递的数据类型和默认值，而数组只是简单的接收。1.1 数组形式接收父组件展示：<template> <div> 这里是原创 2020-05-22 18:45:37 · 922 阅读 · 0 评论 -
五分钟带你玩转vuex（vuex入门）
前言：我们接触过vue.js的 一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：一：什么是vuex？1.1：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（他是集中管理数据的工具）。1.2 vuex的优点：可以实现父子传值，兄弟传值，隔代传值能够存放组件之间共享的数据解决大中型项目中原创 2020-05-21 17:37:20 · 303 阅读 · 0 评论 -
svg矢量图的使用
svg矢量图的使用今天学习了矢量图的三种使用方法，迫不及待想要和大家分享。一、什么是 SVGSVG 是可缩放矢量图形，用户可以用代码来直接描绘图像。区别于 JPG 和 PNG 的需要用引擎来加载的图片，它直接用画布绘制，所以是无损失的。二：svg的优点减少页面请求的压力SVG比其他的图片都要更小SVG是一种可伸缩的图片SVG 图像可以在任何分辨率下轻松打印SVG 可以自定义三：使用方法：3.1 单个的使用：引入单个 ：图片形式引入 我们直接在iconfont 里面下载。下载格式原创 2020-05-19 16:13:34 · 2485 阅读 · 0 评论 -
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
vue3.0在搭建脚手架时候安装node-sass时候报错！！！一 ：报错信息截图二：解决方案原因是我们的 sass版本太高无法编译，那么既然找到了问题我们就降低sass的版本：//首先清除我们已经安装过的版本： npm uninstall node-sass npm uninstall sass-loader npm uninstall style-loader //注意我们清除的时候可以选择全局的清除 全局的安装，否则下次创建 项目还会有同样的错误 执行重复的操作 npm i no原创 2020-05-18 23:10:08 · 13157 阅读 · 4 评论 -
初识typescript（typescript入门）
一：什么是typescript？typescript是一个 基于静态类型检查的强类型语言。我们也可以说是高级版的JavaScript。增加代码的可读性和可维护性。便捷代码时候直接修改bug，弱类型：JavaScript 是动态运行的弱类型语言。var a =1;a="今天有一点点糟糕";// 就是说弱类型的我们可以重复赋值他的类型//var声明的存在的变量提升强类型：就是我们俗称的tslet num: number = 2;console.log(num);//在我们ts原创 2020-05-15 21:28:44 · 319 阅读 · 0 评论 -
前端高频面试题总结（二）
一： 你对cavans有了解吗1.什么是canvas(画布) 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形例如，它可以用于绘制图形，创建动画。 最早由Apple引入WebKit我们可以使用标签来定义一个canvas元素----->使用标签时，建议要成对出现，不要使用闭合的形式。----->canvas元素默认具有高宽width： 300pxheight：150px2 canvas标签的两个属性 看起来和 元素很相像，唯一的不同就是它并原创 2020-05-14 22:14:51 · 1445 阅读 · 1 评论 -
前端高频面试题汇总（一）
前端高频面试题一： 你们项目用vue跨域是怎么解决的vue脚手架 用config的index.js通过ProxyTable来设置的。二： vue的实现原理最大的特点就是组件化开发 双向绑定 数据的更新 视图改变。vue最大特点我感觉就是“组件化“和”数据驱动“组件化就是可以将页面和页面中可复用的元素都看做成组件，写页面的过程，就是写原创 2020-05-14 00:00:16 · 574 阅读 · 0 评论 -
微信小程序实现ToDoList
 ； ；nbsp； ； ； ； ； ；微信小程序实现ToDoList小程序差不多告一段落了，今天给大家展示如何用微信小程序实现todolist。一：wxml 页面<view class="todolist_container"> <view class="top"> <view class="top_left"> <text&原创 2020-05-12 22:58:33 · 1628 阅读 · 0 评论 -
关于微信小程序入门（初识微信小程序）
小程序入门一：小程序是什么目前呢除了公司主流前端技术像：h5,css3 (es6/7/8/...原创 2020-04-29 19:24:53 · 278 阅读 · 1 评论 -
关于vue基础-vue属性
一：vue特点单页面应用组件化开发组建的重用性开发便捷二：MVVM 双向数据绑定M:(model)数据V:(view)视图 指的就是看到的页面VM:(viewmodel)视图模型 是MVVM模式的核心 是连接view和model的桥梁有两种方法一个是将视图转换成数据模型，将看到的页面转换成后端数据，实现方式：dom监听另一种是将模型转换成视图页面，实现方式：数据绑定...原创 2020-03-02 16:49:51 · 231 阅读 · 1 评论 -
浅谈如何实现响应式布局以及rem布局原理
响应式布局概念响应式布局就是可以让网站同时适配不同的手机端和不同的分辨率，可以让用户有更好的体验一：响应式布局实现的方式有几种（5）1. 第一种： 百分比布局所谓的百分比布局其实就是对属性设置来实现让网站适配不同的手机端分辨率，但是百分比布局是相对于父元素来说的 ，我们可以设置的属性有（margin,padding,height,width） 对于HTML元素中的（font-size...原创 2020-02-24 12:02:05 · 964 阅读 · 0 评论 -
关于React总结
一 ：React 介绍1.1：什么是reactreact是用来构建用户界面的JavaScript库，vc很多人认为是react是MVC中的v（视图）。1.2：React 的特点高效灵活Jsx单项数据流声明范式编写方式组件化开发1.3：React 的优点它提高了应用的性能 可以方便地在客户端和服务器端使用 由于 JSX，代码的可读性很好 React很容易与 Me...原创 2020-01-06 20:45:14 · 261 阅读 · 1 评论 -
关于React中路由(router)介绍
关于react中路由(router)介绍现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。重难点：1:如何安装react-router-dom2:路由传值，如何传值3:路由嵌套 路由跳转一：React 路...原创 2019-12-25 15:20:21 · 526 阅读 · 0 评论 -
关于React中用ToDoList组件实现增删查改
关于React中用ToDoList组件实现增删改查学习了react组件 我们今天来用ToDoList实现增删改查。大家都知道react组建中的三大属性 （state，props，refs）我们在这里会用到。下面给大家讲一下实现增删改查功能的思路实现功能用到的方法添加数...原创 2019-12-24 16:54:31 · 683 阅读 · 0 评论 -
介绍React 组件 父子传值兄弟传值及 props和state属性的特点
介绍React 组件 父子传值兄弟传值及 props和state属性的特点重点难点：1.父子传值2.兄弟传值3.state属性介绍4.props属性介绍一. 创建组件的方法组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。创建组建的方法有两种 ：第一种是函数组件 第二种是类组件 下面给大家详细介绍一下1.1 函数组件方法1.引用re...原创 2019-12-20 17:11:54 · 411 阅读 · 3 评论 -
JavaScript如何获取前一天后一天的时间戳
JavaScript如何获取前一天后一天的时间戳首先html页面展示内容为<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2019-12-17 18:57:01 · 4573 阅读 · 1 评论 -
web前端开发
前端学习路线和学习计划第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时...原创 2019-12-17 11:44:16 · 251 阅读 · 3 评论