- 博客(71)
- 收藏
- 关注
RSS订阅原创 vue在哪个生命周期内调用异步请求
ssr不支持beforeMount、mounted钩子函数，所以放在created中有助于一致性。能更快获取到服务器数据，减少页面loading时间；
2023-12-08 22:10:04
129
原创 vue router之route和router的区别
route是一个路由对象（route object）表示当前激活的路由的状态信息，它包含了当前URL解析得到的信息，还有URL匹配的路由记录。路由对象是不可变的，每次成功的导航后都会产生一个新的对象。
2023-12-08 21:50:59
295
原创 Vue2.0与Vue3.0的区别
setup（组件创建之前） -> setup（组件创建完成） -> onBeforeMount（组件挂载之前） -> onMounted（组件挂载完成） -> onBeforeUpdate（数据更新，虚拟DOM打补丁之前） -> onUpdated（数据更新，虚拟DOM渲染完成） -> onBeforeUnmount（组件销毁之前）-> onUnmounted（组件销毁后）只会比较patchFlags发生变化的vnode，进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。
2023-12-04 16:57:16
869
1
原创 三种前端埋点方式
埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。我们可以知道埋点实际上是对特定事件或者行为的数据监控和上报，常见的埋点上报方式有ajax、img、navigator.sendBeacon三种前端埋点上报常使用ajax，img，navigator.sendBeacon。不推荐使用ajax。如果考虑兼容性的话，img是不二之选。
2023-10-30 17:23:06
115
原创 安装了node新版本 使用sourcetree提交代码报错
如果本地存在~/.huskyrc，则使用vim ~/.huskyrc 打开文件，按i键插入export PATH=“/Users/用户名/.nvm/versions/node/v16.10.0/bin/:$PATH” ，之后按esc键退出编辑，按:wq!得到npx的路径，例如’/Users/用户名/.nvm/versions/node/v16.10.0/bin/npx‘如果本地不存在~/.huskyrc文件，可以直接执行命令。然后再~/.huskyrc该文件中加入。
2023-07-14 14:50:06
1330
原创 vue transition标签用法
进入：.v-enter-form始状态、.v-enter-to末状态、.v-enter-active进入动画（vue3）离开：.v-leave-form始状态、.v-leave-to末状态、.v-leave-active离开动画（vue3）进入：.v-enter始状态、.v-enter-to末状态、.v-enter-active进入动画（vue2）离开：.v-leave始状态、.v-leave-to末状态、.v-leave-active离开动画（vue2）如果设置了name属性，则对应的动画类名为。
2023-07-07 17:27:59
455
原创 箭头函数的缺点
上述例子中getName2是原型方法中的普通函数，结果输出了张三，getName3是原型方法中的箭头函数，结果未输出原因getName3()是箭头函数this指向window对象。
2022-07-21 16:28:25
245
1
原创 min-height:100%；没有效果
父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的.解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算.index-wrap{ background: rgba(0, 0, 0, 0.03);
2022-04-14 16:01:05
2065
原创 vue 混合器mixins
引入混合器的页面都会先在本页面mounted之前执行混合器的代码<script>import {logMixins} from '@/utils/masterLogMixins.js';export default { name: "DailyWork", mixins: [logMixins], data: function() { return { }; }, props: { }, compute
2021-12-08 19:48:53
640
原创 浏览器缓存
浏览器缓存读取规则按缓存位置分类 (memory cache, disk cache, Service Worker 等)它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)按照操作系统的常理：先读内存再读硬盘1.Service WorkerService Worker 能够操作的缓存是有别于浏览器内部的 memory cache 或者 disk cache 的。我们可以从 Chrome 的 F12 中，Application -> Cache Storage 找到这个单独的“小金库
2021-11-17 18:05:01
148
原创 Vue+js 实现左右拖动
<div class="wrap-4"> <div class="wrap-4-card" v-on:touchstart="bannerTouchStart" v-on:touchend="bannerTouchEnd($event)" v-on:touchcancel="bannerTouchEnd($event)"> <ul class="contentBox"> <li class="w
2021-11-16 18:43:53
1159
1
原创 vue+js实现input输入手机号 提交成功后3秒自动跳转
<template> <div class="wrap-box"> <div class="container-box"> <div class="container-left"></div> <div class="container-right"> <template v-if="!submitSuccess">
2021-11-16 18:38:23
870
原创 函数的柯里化
什么是函数柯里化（柯里化：Currying）函数柯里化是指实现一个函数，这个函数可以把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。一个简单的例子// 普通的add函数function add(x, y) { return x + y}// Currying后function curryingAdd(x) { return function (y) { return x + y
2021-08-25 17:05:41
305
原创 cookie session sessionStorage localStorage的区别
cookie session的区别cookie数据存放在客户端浏览器上，session数据放在服务器上。cookie不是很安全，可以分析放在本地的cookie进行cookie欺骗，考虑到安全应当使用sessionsession会在一定时间内保存在服务器上。当访问量增多，会比较占用服务器的性能，考虑到性能方面，应当使用cookie单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie。可以将登陆信息等重要信息存放为SESSION其他信息如果需要保留，可以放在C
2021-06-18 17:01:28
116
原创 GET和POST的区别
get 参数通过url传递，post放在request body中。get 通过地址栏传值，post通过服务器传值。get请求在url中传递的参数是有长度限制的，而post没有。get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。get请求只能进行url编码，而post支持多种编码方式。get请求会浏览器主动catche。get请求参数会被完整的保留在浏览器历史记录内，而post中的参数不会被保留。get和post本质上就是TCP链接，并无差别。但是由于HTTP的.
2021-06-18 16:14:01
85
原创 rem em px的区别 响应式布局的常用解决方案
一、pxpx像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px是固定单位，一旦设定 在任何屏幕下显示的大小都是一样的。即无法根据页面大小自适应。二、remrem是相对单位，是根据根元素（元素）的font-size大小来计算的。rem可以用来适配各种移动设备（根据媒体查询给根元素设置不同的font-size）。html { font-size: 10px;}div { font-size: 4rem; /* 40px */ width: 30rem; /* 300
2021-06-18 15:41:56
199
原创 Unexpected end of JSON input while parsing near错误
npm install出现”Unexpected end of JSON input while parsing near”的错误。运行 npm cache clean --force。
2021-05-25 18:12:17
129
原创 Vue中v-if v-show 哪个消耗的性能大
性能方面 v-if 有较高的切换性能消耗v-show 有较高的 初始渲染消耗如果元素涉及频繁的切换，最好不要使用v-if ， 如果元素可能永远也不会被显示出来被用户看到， 则推荐使用 v-if.
2021-05-10 17:24:07
1185
原创 从输入URL到看到页面的过程
网页生成的过程：1.输入域名后开启DNS查询，查找对应的IP地址2.通过三次握手建立连接；3.连接后下载页面请求的HTML css js等4.HTML代码转化为DOM树5.CSS代码转化为CSSOM树（css Object Model）6.结合DOM和CSSOM，生成一颗渲染树（包含每个节点的视觉信息）7.生成布局（layout），即将所有渲染树的所有节点进行平面合成8.将布局绘制（paint）在屏幕上9.绘制结束后关闭TCP链接，通过四次挥手*耗时的是 “生成布局”(flow)和“绘
2021-04-29 17:09:07
64
原创 vue.nextTick()与setTimeout的区别
nextTick相当于一个异步函数：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。vue.nextTick()的使用场景Vue中DOM渲染是在mounted()钩子函数中，created()钩子函数中DOM还未渲染，无法直接操作DOM1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所
2021-04-29 16:00:04
7670
2
原创 vue的生命周期
vue的生命周期beforeCreate(创建前) -> created(创建后) -> berforeMount(载入前) -> mounted(载入后) -> beforeUpdate(更新前) -> updated(更新后) -> beforeDestory(销毁前) -> destoryed(销毁后)完整的Vuenew Vue({ ...
2021-04-28 16:36:10
480
2
原创 Vue+原生js实现图片懒加载
一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起请求就是根据是否有src属性决定的。那么我们就要对标签的src属性下手了，在没进入可视区域的时候，我们先不给这个标签赋src属性，这样浏览器就不会发送请求了。总结：我们知道了从标签下手，那么更重要的就是可视区域的判断了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v
2021-04-23 15:46:39
281
原创 vue实现竖向跑马灯
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯 </title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <style> /*跑马灯*/ .race-lamp-card{
2021-04-15 17:21:40
1911
1
原创 js JSON
let params = { questionId: "Q_10310736184767-5", newExamId: "E_10300300883132", subId: 0, userSubSubScoreMap: { ["334090843"]: {["1"] : 1} }}JSON.stringify(params);//结果为："{\"questionId\":\"Q_10310736184767-5\",\"newExamId\":\"E_103
2020-08-25 10:54:58
82
原创 vue用一个方法 设置class
<i class="icon" :class="getActivityClass(item)"</i>getActivityClass : function(item){ let className=''; switch (item.master) { case 'WRONG': className=`error-${item.views.join(',')}` break; ca
2020-08-22 14:51:31
351
原创 Vuex--理解Vuex是什么
Vuex是什么Vuex是一个为了管理共享状态的工具，是一个全局模型，在开发大型单页面应用过程中作用大，如果不是大型单页面开发，那 Vuex 可能还是你的一个负担。一个例子new Vue({ // state 数据源 data () { return { count: 0 } }, // view 视图 template: ` <div>{{ count }}</div> `, // actions 事件
2020-08-17 18:03:55
216
1
原创 vue如何根据条件加click事件
方式一：在绑定事件中直接添加标示量clickFlag（条件）<div class="situation-item" @click="clickFlag && add()"> 添加</div>方式二：用v-if 、v-else-if、v-else 判断<div v-if="clickFlag" @click="add()"> 添加</div><div v-else> 添加</div>...
2020-08-17 15:03:22
3435
原创 git提交代码到远程分支
1.提交单个文件git add 工程名的下一级开始写路径直到文件名2.提交全部文件git add .（后面有一个点）3.执行commit提交git commit -m “文字描述”（单引号和双引号都可以）4.方案一：合并远程分支代码（如果在此之前有别人提交了代码，需要先合并代码才能够push）git fetch origin(git remote update有的时候可能需要同步一下远程和本地）git merge origin/远程分支名5.方案二：合并远程分支代码git pull
2020-07-21 17:09:29
279
原创 深克隆与浅克隆
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-07-10 11:40:02
109
原创 js最大余额法
js最大余额法：解决百分比和不到100%的问题//valueList要计算的数组//idx要计算数组中值的下表//precision百分比保留几位小数getPercentValue: function(valueList, idx, precision) { // 判断是否为空 if (!valueList[idx]) { return 0; } // 求和 let sum = valueList.reduce(function(acc, va
2020-07-09 14:25:29
965
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人