- 博客(38)
- 收藏
- 关注
RSS订阅原创 vuex(mapActions+mapGetter)配合v-model处理数据
业务场景：elementui中的el-checkbox绑定的数据为一个存储在vuex当中的数据// template<el-checkbox v-model="showBasicData"></el-checkbox>一开始，本来尝试直接用mapGetters中返回的getter作为数据源，类似如下形式：computed: { ...mapGetters([ 'showBasicData' ])}但，会报错：Computed property “XX” w
2022-01-19 10:44:09
757
1
原创 手写Bind+箭头函数this指向理解
本来只是遇见了一个面试题准备手写一下，但最后发现通过手写bind最主要的是深刻理解了箭头函数this指向问题。为什么这么说？上代码直接看// 正确手写Bind结果Function.prototype.mybind = function (...args) { return () => { this.apply(args[0], args.slice(1)) }}乍一眼看上去，感觉没啥，但其实我一开始写的是这样的：Function.prototype.mybind = (...arg
2021-12-27 12:05:09
510
原创 es6类语法extends继承原理
总结继承主要做了三件事：调用父类构造函数产生父类实例，创建this，并在后续添加上子类相关属性利用Object.create()方法基于父类原型对象创建一个新对象，且设置该对象的constructor属性指向子类构造函数。并将该对象赋值为子类的原型对象将子类构造函数的__proto__属性赋值为父类的构造函数// babel编译后重点函数_inheritsfunction _inherits(sub,parent){ // 类型检查报错 if(typeOf parent!=="fu
2021-12-26 11:52:57
1522
原创 踩坑——Elementui Table控件动态列初始化错位、错行问题
解决Elementui Table控件动态列初始化错位、错行问题主要基于两点：对于el-table中动态渲染的列：要有key，如：<el-table-column:key="index+Math.random()"> // 这里注意，一定要保证key的不一致性</el-table-column>在获取完数据时，在nextTick中进行doLayout()this.$nextTick(() => { this.$refs['your-table-name'
2021-10-12 18:10:22
1415
2
原创 踩坑——Elementui Table控件el-table-column表头响应式
场景：Elementui的table组件的<el-table-column>中，表头数据是随着日期选择器变化而动态生成，不断变化的，所以显示的表头内容需要响应式变化。// 大致结构：<el-table-column v-for="(label, index) in tableLabels" :key="index" :label="label.split('--')[0]" // 这一行非常重要！不然无法响应式 :prop="label.substr(-8)">
2021-06-17 15:04:24
1641
原创 Chrome浏览器模拟4G网络
1 F12 打开开发者工具2 选择Network面板，选择“Add”添加自定义网络：4 填写自定义网络网速信息：5 选择“Add”保存自定义网络信息，设置成功结果：需要模拟4G网络环境时选择“4G”这一项设置即可...
2021-04-14 10:53:19
2407
原创 解决：element动态渲染菜单（垂直）后折叠菜单栏时＜el-submenu＞文字不隐藏问题
在slot为title的<template>中，给submenu的名字处多加一层<span>就好了························如下：<el-submenu v-for="menu in menuList"> <template> <i icon="el-icon-menu"></i> <span>{{menu.manuName}}</span> <!--这一组span标签是
2021-04-01 16:43:07
1164
2
原创 vue-cli-service本地编译不打印lint warning和error信息
本地每次启服务，打印一大堆lint提示warning和error，有时速度超级慢，就想编译时候，不要打印这些信息了，修改vue.config.js即可：module.exports = { linOnSave: false // 不打印lint提示}https://cli.vuejs.org/config/#lintonsave...
2021-03-09 14:58:16
1234
原创 webpack-dev-server启动本地服务报错Cannot find module ‘webpack-cli/bin/config-yargs‘
webpack-de-server issue链接：https://github.com/webpack/webpack-dev-server/issues/2759原因：webpack-dev-server更新版本，命令行由原来的webpack dev serve改为了webpack serve故，package.json中需改为："scripts": { "dev": "webpack serve --mode development" }详见github Readme：h
2020-12-10 14:43:06
224
原创 Vue cli添加Webpack rule显示markdown文件
vue cli添加webpack配置官网详解：https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7新建md文件：scr|-assets |-hello.md创建用于显示markdown文档的markdown.vue<temp...
2020-04-26 11:03:44
766
原创 js 作用域中的变量==this中的变量？？
以全局作用域为例在console中定义：const a= 1;window.a //undefined但是，反过来：window.a=1;a //1也就是说，通过向上下文对象this中添加属性，该属性就会被加入到全局作用域中；而在全局作用域中定义的变量，不会被自动添加进上下文对象中。反观，this和作用域是两个不同的概念...
2020-04-21 11:07:31
164
原创 Vue进阶——源码解读 课题1 Vue数据响应式原理
目的：数据驱动视图，即数据变化引起视图变化怎么做：1 首先，要监听到数据的变化，简称变化侦测1 变化侦测：通过Object.defineProperty()方法使属性变的可观测...
2020-04-19 14:20:26
238
1
原创 Vue cli + Vue Router构建单页应用
安装vue， @vue/cli，vue-routernpm i @vue/cli -gnpm i vue-router -g创建项目vue create my-app在创建的项目src文件夹中，创建routers.js内容如下:import Home from './components/home.vue';import newPage from './compon...
2020-04-19 14:04:37
158
原创 Vue进阶——源码解读（前言）
Vue源码地址：https://github.com/vuejs/vue学习总线地址：https://nlrx-wjc.github.io/Learn-Vue-Source-Code/源码结构├─dist # 项目构建后的文件├─scripts # 与项目构建相关的脚本和配置文件├─flow ...
2020-03-17 16:33:44
133
原创 Localstorage和Sessionstorage比较
Localstorage的生命周期是永久性的，也就是说不手动删除的话，同源的网站可以一直共享这些数据。Sessionstorage的生命周期为当前会话，用户关闭页面或浏览器后，Sessionstorage就失效了，且不支持同源网站数据共享。会话：指用户从访问开始到关闭网页的这段时间同源：协议、域名、端口一致的网站...
2020-02-14 21:40:42
157
原创 Promise.all()和Promise.race() 并行调用异步操作
两个函数均用于并行调用多个异步操作使用All：两个异步操作同时resolve之后调用then()var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setT...
2020-01-31 19:33:58
515
原创 关于Promise .then()
var log = function(res) { console.log(res); }var p1=new Promise(function (resolve,reject){ var p1 = 1; if(p1==1) resolve("p1 resolve"); else reject("p1 failed");});var p2=new Promise(function...
2020-01-31 14:07:07
769
原创 回调函数实现异步操作
例子：function callback() { console.log("callback");}console.log("before");setTimeout(callback,0); //调用回调函数实现异步操作console.log("after");结果：beforeaftercallback方法：把想异步运行的操作封装成回调函数，再通过异步调用的方式调用这个封...
2020-01-31 13:48:55
1846
原创 Session与Cookie
两者均用于会话跟踪Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份会话跟踪用于长时间跟踪记录用户的身份和行为，解决http协议无状态的问题，帮助服务器“记住”用户的身份或行为。Cookie分为会话Cookie和持久Cookie，大小限制最大为4k每个用户在服务器上都有一个唯一的Session与之对应，SessionId在服务器端创建，并通过Co...
2020-01-29 20:33:26
130
原创 css 兼容性控制min-width与js宽度对应
记一个坑···当用css控制显示，运用到min-width等控制时，若js也想在相同的宽度值时进行一些相应的操作，那么，必须要使用window.innerWidth这一属性值！！！其他值的大小都和min-width的值不一样，会导致样式不匹配...
2019-12-20 17:39:34
455
原创 Vue服务端渲染（Nodejs）
主要参考官方文档：https://ssr.vuejs.org/zh/安装：npm install vue vue-server-renderer --save应用场景：Node某一路由返回的页面利用vue component和服务端数据进行服务端的页面渲染，(没有进行服务端渲染的原因是数据来源为服务端，其他模板引擎使用res.render()方法实现相同服务端渲染功能)建议代码结构：M...
2019-12-19 15:56:29
1679
原创 自定义右键上下文列表
Event:contextmenu: The right button of the mouse is clicked (before the context menu is displayed).Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event<!DOCTYPE ...
2019-12-17 11:15:28
154
原创 translate实现CSS 垂直或水平方向居中
<div> <p>Sub Section</p></div>CSS:div {position: relative; /*请为父级设定position为relative*/height: 100px; /*请为父级设定高度*/width: 100px; /*请为父级设定宽度*/}//水平垂直居中p {position: abs...
2019-11-29 15:15:43
384
原创 IE 10+ CSS兼容
CSS文件里添加@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*兼容代码*/}
2019-11-26 18:20:41
320
原创 Vue中运用ajax this指向问题
在vue component中的methods域里定义一个方法，这个方法中会调用某一个ajax call，在ajax中的this会指向ajax本身，而不再是vue实例本身。methods: {typeAhead: function (searchType) { **var self = this;** //获取vue实例本身，捕获指针指向 var searchURL = ""; ...
2019-11-01 15:47:34
1827
原创 百度云服务器安装nodejs并开放端口实现页面访问
安装nodejs：sudo yum install nodejsnode --version 检测安装成功安装npmsudo yum install npm --enablerepo=epelnode搭建服务器：新建 /root/hellonode文件夹：mkdir hellonodecd hellonode/新建并打开server.js文件：vim server.js点击‘...
2019-10-19 13:28:12
596
原创 百度云服务器安装Mysql 5.6
Mysql下载地址：https://dev.mysql.com/downloads/mysql/获取下图所示压缩包地址：下载命令：wget -c https://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.46-linux-glibc2.12-x86_64.tar.gz下载完成后：安装这篇文章步骤进行安装https://www....
2019-10-19 12:01:39
2445
原创 CSS-利用border属性画三角形和梯形
首先，看一下border的延申效果：定义一个正常显示的div.triangle {height: 200px;width: 300px;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid black;border-left: 50px solid yellow;}...
2019-10-09 23:06:16
998
原创 利用Math.random()随机获取数组中的项
Math.random()方法随机返回大于等于0到1之间的一个数获取某一范围内某一整数的式子：值 = Math.floor(Math.random() * 可能的数的个数 + 第一个可能的数);基于以上两点，逻辑上，随机得到0到数组长度之间的任意一个数，就算是随机获取数组中的某一个数了。代码如下：var values = [1,2,3,4,5];var num=pickUp(valu...
2019-10-09 22:56:12
2148
原创 字符串压缩
给定由普通英文字母组成的非空字符串s1，要求将连续出现的字符压缩成字符和该字符连续出现的次数，并返回新的字符串s2。s1字符串的长度不超过100输入描述:全部由普通英文字符组成的长度不超过100的字符串 。输出描述:由英文字符和数字组成的字符串，其中数字表示它前面的字符在输入字符串中连续出现的次数示例输入：aabccccaaa输出：a2bc4a3时间复杂度：O(n)空间复杂度...
2019-09-20 10:20:26
1293
原创 defer js文件 & $(document).ready() & $(window).load()运行顺序
工作中遇到需要基于某一defer文件的class动态插入值判断进行下一步操作，发现使用$(window).load()定义的函数可以实现需求，即判断发生在defer文件运行之后，而用$(document).ready()则过早执行判断，即判断发生在defer文件运行之前，导致结果永远为false。故，三者运行事件为：$(document).ready()最早 然后是defer文件 最后是$(w...
2019-09-18 18:40:26
224
原创 js控制运行时间的原生window和jquery写法
共有三种控制运行时间的函数：window.onload (js原生)$(document).ready() （jquery提供的时间节点一）$(window).load()（jquery提供的时间节点二）三者关系：window.onload 和 $(window).load()指的是同一个时间节点，及页面中图片或其他外部文件都加载完毕之后，进行操作。而$(document).ready...
2019-09-18 18:35:39
540
翻译 开发新手常犯错误
开发前不思考人们不会轻易写出高质量代码，这需要严谨的思考和前期调查书写高质量代码过程：想，调查，计划，写，测试，改编程实质大多指：看旧代码，调查还差什么以及怎么和当前系统整合，从小的、可测试的小模块开始写新特性。真正花在编码的时间只占10%编程是一个基于逻辑思考的创新性活动开发前计划太多不要妄想提出完美的计划只找到一个可以让你开始的好的计划 就行了事实是，计划是不断变化的拒绝w...
2019-09-17 16:28:38
270
原创 前端小考点--(1)
CSStransition是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性transition-property：要修改的属性值，如height，width等transition-duration：以秒或毫秒为单位指定过渡动画所需的时间，默认为0，即...
2019-09-10 23:05:41
138
原创 事件冒泡及阻止事件冒泡
事件冒泡：冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件阻止事件冒泡方法：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation事件冒泡小例子(完整html)：三个<div>层层嵌套关系，由外向里层级关系为A包含B，B包含C效果：只点击C部分，console会打印出C B A，说...
2019-09-07 16:02:58
214
原创 n*n矩阵走法问题
问题（杨辉三角变形）：有一个nn的矩形方格 要求每次只能向右或向下前进一步，问：从第一格走到第nn格的走法一共有多少种每一格的走法=走到这一格左边格子的方法数+走到这一格上方格子的方法数难点：怎么设计程序达到渐进式的正确的加法运算var n = 4; // 4*4 方格var ways = function (n) { //定义二维数组 var array = new Array(...
2019-09-07 13:41:27
1193
原创 事件与事件属性
“事件” 与 “事件属性”，很容易混淆的两个概念常见并行一起出现的场景：百度一下“js绑定click事件”，随便点进去，都会有几种绑定方法，几乎每一篇，都会涉及到‘click’和‘onclick’这两个关键词之前一直理解不清，只能死记硬背下绑定的方法，今天意外通过解决 ‘Vue中限制input标签输入内容’ 这一问题，深入理解了一下“事件”和“事件属性”概念，瞬间清晰很多。回到click与...
2019-09-03 18:25:11
1384
原创 斐波那契数列 Fibonacci Numbers
斐波那契数列：1 1 2 3 5 8 13···每一位都是前两位数的和问题：求斐波那契数列第n位的数字是几(标号从0开始)关键词：递归一个学习理解递归意义很好的例子var index = 10; // 第十位数字var fibnacci = function fibnacci(index) { if(index == 0) return 1; // 第一个数字，也就是递归结束点...
2019-09-03 16:07:24
285
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人