江海寄余生_-CSDN博客

原创【vue2 】页面在放大缩小页面下显示问题的处理

在开发中写好了页面，但是没有针对windows设定的放大缩小文本比例来做兼容，故在非100%比例下显示有问题。

2023-05-17 15:42:34 1007

原创 [vue2]Vue路由守卫beforeRouteEnter操作data数据

最近项目中遇到需要使用路由守卫，在beforeRouteEnter里给data里的值赋值，故写下一些东西来增加印象。

2023-04-19 11:46:07 1465

原创【el-select】关于el-option的事件

1.设置:disable-remote=“false” 来启用el-option的鼠标事件。3.在el-select的change事件后，因为，mouseleave事件的原因，

2023-03-27 11:07:32 2624

原创 [JS] JS小技巧

实际上我们是可以对数组解构赋值拿到length属性的，通过这个特性也可以做更多的事情。// 1 last;// 3。

2023-03-22 09:36:09 177

原创 [ES6]6个让你少写多做的小技巧

关于奇怪的 Array 函数：众所周知，我们可以通过Array函数来做以下事情。初始化一个指定长度的数组。设置数组的初始值。传递给Array函数的参数个数不一样，其功能也不一样。这常常让我感到困惑。幸运的是，我们可以使用 Array.of 来弥补 Array 的不足。

2023-03-20 09:07:04 186

原创 [vue 日志]el-dialog拖拽记录，包含不出边界代码

1 代码新建drag.js文件/*** v-dialogDrag 弹窗拖拽*/export default { bind(el, binding, vnode, oldVnode) { const value = binding.value if (value == false) return // 获取拖拽内容头部 const dialogHeaderEl = el.querySelector('.el-dialog__header'); const

2022-03-10 17:35:13 212

原创【vue 日志】关于文件上传的问题记录

序言最近任务需要做一个手动上传文件的功能，刚好记录一下一.需求如下图，实现一个手动上传文件的功能二.代码1. 结构<el-form-item label="文件上传：" prop="file"> <el-upload class="upload-demo" action="https://www.baidu.com/" :multiple='false' :auto-upload="false" :on-change="h

2022-01-12 14:21:05 406

原创 [vue 日志] 关于DateTimePicker 日期时间选择器时间选择问题的解决

1.问题复现因为我这边需要一个配置页面，配置内容项很多，故使用了动态渲染。配置代码如下但是这里这样配置之后，时间就不能选择正确的时间了。2.问题原因查找了一下，发现是因为value-format=‘yyyy-MM-DD HH:mm:ss’ 的配置项问题导致的hh 12小时制 HH 24小时制而且DD也会影响日期的选择，需要改成dd所以正确的value-format =‘yyyy-MM-dd HH:mm:ss’...

2021-12-31 14:31:05 1363

原创 [vue 进阶] 关于dicts字典的用法

前言在使用若依框架开发小项目的时候，发现在项目中频繁使用到字典，原本代码中的dicts没有深入研究，故自己写了一个混入来实现想要的字典获取功能。但是觉得每次切换页面都需要调用一下，而且每个系统都有一个mixins混入文件，感觉维护起来稍显繁琐。继而研究了一下dicts的用法，记录一下使用过程。1.首先确定字典的接口，在若依框架中如下，具体可根据自己后端提供的字典接口进行修改// 根据字典类型查询字典数据信息export function getDicts(dictType) { return r

2021-12-28 09:59:41 21194 4

原创【JS技巧】使用顶层 await 简化 JS 代码

前言JavaScript 是一种流行的编程语言，最初被设计为单线程和同步的语言，意味着程序需要在不等待获取外部资源或者耗时的计算的情况下一步一步的运行。如果脚本需要这样的资源或计算，这种同步行为将导致错误。这会阻塞队列中的所有其他进程运行，无论它们是否依赖于那些阻塞中的任务。但很久以前，JavaScript 引入了一个机制让其可以在等待外部资源或者耗时任务的时候去执行其剩余的代码。这种异步行为是通过在函数上使用回调或 promise 来实现的。什么是回调和promise我将通过代码来解释这些概念。如

2021-03-29 23:57:46 5478

原创 [vue] 关于性能优化

前言性能优化部分的问题主要考察编程者对网站性能优化的了解。如何做好性能优化，哪些操作会引起性能优化的问题，性能优化指标是什么等，都值得编程者关注一、对重构的理解网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。对于传统的网站来说，重构通常包括以下方面：把表格（ table）布局改为DIV+CSS。使网站前端兼容现代浏览器。对移动平台进行优化。针对搜索引擎进行优化。深层次的

2021-03-29 23:45:53 273

原创 [vue日志]Vue.nextTick()的理解

什么是Vue.nextTick()官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。注意：重点是获取更新后的DOM 就是在开发过程中有个需求是需要在created阶段操作数据更新后的节点这时候就需要用到Vue.nextTick()原因在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以在created中一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就

2020-07-05 21:21:07 172

原创 [vue日志]父子组件间通信实例讲解（props,$ref, $emit）

前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。一、示例两个组件father.vue和child.vue作为示例的基础。//父组件<template> <div> <h1>我是父组件！</h1> <child></

2020-06-27 23:07:43 351

原创 [git小记]TortoiseGit使用教程

TortoiseGit使用教程

2020-06-23 17:59:00 747

原创 [js数据技巧] js小技巧集合

数组常用方法先献上数组方法懒人图一张祭天！（除了Array.keys()/Array.values()/Array.entries()基本都有）：数组方法大全生成类似[1-100]这样的的数组：测试大量数组数据时可以：let arr = new Array(100).fill(0).map((item, index) => index + 1)数组解构赋值应用// 交换变量[a, b] = [b, a][o.a, o.b] = [o.b, o.a]// 生成剩余数组const

2020-06-21 23:08:53 304

原创 [css]日食小样式

效果源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日食</title> <style> *{ mar

2020-06-21 21:50:57 193

原创 [vue日志]vue-cli脚手架搭建项目各选项详解

1、根据的是最新版vue-cli4vue create myproject2、选择自定义方式选择Manually select features3、基础选项? Check the features needed for your project:( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被

2020-06-15 22:20:16 1759

原创 [vue日志] vue-cli脚手架的目录结构

vue.js是一套构建用户界面的渐进式框架。vue采用自底向上增量开发的设计。vue的核心库只关心视图层，非常容易学习，非常容易与其它库和已有项目整合。vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。1.总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。　2.文件结构细分2.1 build——[webpac

2020-06-15 22:12:39 219

原创安装vue脚手架一直卡着不动的解决办法

1.关闭防火墙等软件，避免拦截和无法使用npm安装包2.使用淘宝镜像其次去下载一个cnpm （注释：淘宝npm镜像，这个是阿里把外国的npm服务器搬到我们中国来了，用淘宝镜像npm下载一些配置文件会更快一些）cmd 右键复制下行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装vue文件cnpm install vue 4.安装vue脚手架，关于脚手架问题，有些兄弟姐妹会发现安装的时候会一直卡着不

2020-06-15 15:41:18 9632 3

原创自己整理的git命令，查缺补漏

我每天使用 Git ，但是很多命令记不住。一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库先附上快查表一、新建代码库在当前目录新建一个Git代码库$ git init新建一个目录，将其初始化为Git代码库$ git init [project-nam

2020-06-11 23:11:29 357

原创 [css]VScode中移动端适配插件cssrem的使用

1.安装插件vscode扩展商店搜索 “cssrem"插件2.运行并修改配置先启动插件，之后选择设置->扩展设置根据实际设计稿设置基础字号配置好了之后就可以重启vscode。3.搭配js代码编程在项目中创建一个自动修改基准font-size的js脚本cssrem.js，在index.html里body标签下引入一下，我这里是设置的100倍，也就是100px=1rem。fnResize();window.onresize = function () { fnResize

2020-06-11 22:44:32 2131

原创 [JS日志]JavaScript工具函数整理

为元素添加on方法Element.prototype.on = Element.prototype.addEventListener;NodeList.prototype.on = function (event, fn) {、 []['forEach'].call(this, function (el) { el.on(event, fn); }); return this;};为元素添加trigger方法Element.prototype.trigg

2020-06-07 21:57:30 314 1

原创 [React日志]08-React中事件的写法总结

1:事件与原生事件类型 react中式on+首字母大写的事件名例如onClick如图只需要on以后常用的事件都会提示出来2:在Content.js中新建一系列的按钮来对事件进行学习2.1 普通的函数绑定 <button onClick={function(){alert('6666')}}>按钮1</button>2.2 箭头函数的绑定 <button onClick={()=>{ alert("7777"); }}>按钮2&

2020-06-04 00:01:22 145

原创 [React日志]07-进一步使用插件来对props做数据类型的规范

1:资料来源https://www.npmjs.com/package/prop-types 利用第三方prop-types来处理让props看起来有数据类型约束(js是弱语言没有数据类型的概率)2:安装npm install --save prop-types3:使用在需要用的地方引入(Header.js)4:做一下测试会到index.js中给Header传一个数字试一试 index.js中代码改写如下里面的代码也可以写useage={18}5:运行代码结果不会错页面

2020-06-03 23:56:19 162 1

原创 [React日志]06-React中props和state

1:props是子组件用来接收父组件的数据父组件如果传十个参数但是子组件用了9个就会导致子组件中满屏都是this.props 就很难去区分各个参数的作用2:将需要用的数据放入constructor中进行提前说明代码如下3:还需要跟子组件自身的数据有所区分才行(函数中参数和自己定义的内容) 可以使用state来做区分...

2020-06-03 23:53:16 75

原创 [Vue日志]Vue组件传参的八种方式

前言Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的一、props 传参子组件定义 props 有三种方式:// 第一种数组方式props: [xxx, xxx, xxx]// 第二种对象方式props: { xxx: Number, xxx: String}// 第三种对象嵌套对象方式props: { xxx: { //类型不匹配会警告 type: Number,

2020-06-02 00:40:38 1016

原创 [webSocket]WebSocket 教程

1111111111

2020-05-26 01:51:32 410

原创 [React日志]初识react-hooks

前言现在稍微大型的站点都会采用H5/PC端并行，通过nignx获取浏览器的UA信息来切换站点。但这对于一些企业站点或人手不足的小型项目来说，就很难实现。通过CSS媒体查询实现响应式布局，是主流方式。但是，有时在 React 程序中，需要根据屏幕大小有条件地渲染不同的组件（写媒体查询太麻烦了，还不如另写组件），其实使用React Hooks，可以更灵活实现。1. 方案一：innerWidth一个很简单粗略的方案，是个前端都知道：const MyComponent = () => {

2020-05-25 10:29:16 209

原创移动端开发的兼容问题小总结

1、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。解决方案:使用opacity=1来解决2、对非可点击元素如(label,span)监听click事件，部分ios版本下不会触发。解决方案:css增加cursor:pointer就搞定了3、移动端1px边框解决方案：比如按钮的box的class为btn.btn:before{ content:''; position: absolute; top: 0; left: 0;

2020-05-20 20:24:59 302

原创 [RN日志]React-Native 入门指南

一、背景1、为什么需要React-Native？在React-Native出现之前移动端主流的开发模式是原生开发和Hybrid开发（H5混合原生开发），Hybrid app相较于native app的优势是开发成本低开发速度快(H5页面开发跨平台，无需重新写web、android、ios代码)，尽管native app在开发上需要更多时间，但却带来了更好的用户体验(页面渲染、手势操作的流畅性)，也正是基于这两点Facebook在2015年推出了React-NativeWhat we really w

2020-05-20 19:51:59 364

原创 [js日志]JS中的call、apply、bind方法详解

1.区别1.1三者的相同点：都是用来改变this的指向1.2 call()和apply()的区别：相同点：都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）例如： B.call(A, args1,args2);即A对象调用B对象的方法F.apply(G, arguments);即G对象应用F对象的方法不同点：参数书写方式不同call()的第一个参数是this要指向的对象...

2020-05-19 11:47:13 77

原创 [JS日志]js中的回调函数callback

前言定义：在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。因此callback 不一定用于异步，一般同步(阻塞)的场景下也经常用到回调，比如要求执行某些操作后执行回调函数。一.先搞清楚异步和同步异步async/同步sync举个小栗子1.早上起来不论你是先刷牙还是先洗脸，都要等一个事情完毕后才能进行下一项，这就是一个同步的例子2.然后刷牙的时候你

2020-05-15 21:18:50 462 1

原创 [React日志]函数组件和类组件

1.定义组件有两个要求：组件名称必须以大写字母开头组件的返回值只能有一个根元素2.函数组件function Welcome (props) { return <h1>Welcome {props.name}</h1>}ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));数组件接收一个单一的 props 对象并返回了一个React元素操作非常简单能

2020-05-15 18:47:13 226

原创 [JS日志]setTimeout、Promise、Async/Await 的区别

1. setTimeoutconsole.log('1 start') //1. 打印 script startsetTimeout(function(){ console.log('settimeout') // 4. 打印 settimeout}) // 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数console.log('2 end') //3. 打印 script start // 输出顺序：1 start->2 end->sett

2020-05-14 22:36:56 351 1

原创 [js日志]宏任务、微任务与Event Loop

1.宏任务和微任务说到宏任务和微任务，我们就不得不提 Event Loop 了JS的本质是单线：一般来说，非阻塞性的任务采取同步的方式，直接在主线程的执行栈完成。一般来说，阻塞性的任务都会采用异步来执行，异步的工作一般会交给其他线程完成，然后回调函数会放到事件队列中。当主线程的任务执行完了(执行栈空了)，JS会去询问事件队列执行一个宏任务(先执行同步代码)–>执行所有微任务–>UI render–>执行下一个宏任务–>执行所有微任务–>UI rende

2020-05-14 22:22:19 296

原创 [算法]Diff算法

Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。Diff算法有三大策略：Tree DiffComponent DiffElement Diff三种策略的执行顺序也是顺序依次执行。Tree Diff 是对树每一层进行遍历，找出不同，如图1所示。Component Diff 是数据层面的差异比较如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：与)，按照原策略继续比较Virtual DO.

2020-05-14 21:18:08 648

原创 [vue日志-vuex]VueX（Vue状态管理模式)

一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.

2020-05-11 22:56:44 210

空空如也

空空如也