- 博客(107)
- 收藏
- 关注
RSS订阅原创 解决TS中“Cannot find module ‘path‘ or its corresponding type declarations.”
解决TypeScript中无法找到path模块的问题
2022-07-15 09:51:38
20576
1
原创 screenWidth、clientWidth、offsetWidth、 scrollWidth的区别
screenWidth、clientWidth、offsetWidth、 scrollWidth的区别
2022-07-13 14:55:05
2190
原创 Echarts图表常用配置及实例
Echarts图表基础配置；Echarts图表数据分段（x轴，y轴分段）展示不同的颜色在一条折线上展示两部分数据时间格式化
2022-05-24 20:58:55
1073
1
原创 【Vue】class组件（vue-property-decorator）
Vue-property-decorator简介vue-class-component 是官方推出的vue对typescript支持的装饰器(库)，可以将Vue中的组件用类的方式编写。vue-property-decoretor即vue属性装饰器，这个库完全依赖于vue-class-component。在vue中使用typescript，通过装饰器来简化书写。在使用前需要进行安装：npm i -S vue-property-decorator属性@Component声明组件@Componen
2022-05-12 16:52:43
1912
原创 React与Vue的区别
React与Vue的相同点（1）都支持服务器渲染；（2）都是数据驱动视图；在以前，我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作，采用数据驱动视图的方式，只需要关注数据的变化。（3）都遵循组件化思想；React和Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一一些细块，也就是组件，组件之间组合嵌套就形成最后的网页界面。（4）都使用虚拟DOM；（5）都有状态管理；react有redux，vue有vuex。不同点（1）框架本质不同；Vue本质是
2022-03-25 23:41:53
7924
原创 Vue响应式原理
Vue 最独特的特性之一，是其非侵入性（不用调用Vue的api来实现数据更新）的响应式系统。响应式：即数据改变，对应的视图也会改变。响应式原理：采用数据劫持结合发布-订阅模式的方式，通过Object-defineProperty()来劫持data里面各个属性的setter和getter，在数据变动的时候，发布消息给订阅者，触发相应的监听回调。Object.defineProperty()可以直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象。还可以设置一些额外隐藏的属性（例如是
2022-03-25 23:39:25
3878
1
原创 MVC与MVVM模式的区别
MVC框架MVC框架即Model View Controller，是模型Model-视图View-控制器Controller的缩写。Model：模型，是应用程序中用于处理数据逻辑的部分，通常模型对象负责在数据库中存取数据。View：视图，用户界面显示，通常视图是根据模型数据创建的。controller：控制器，数据模型和视图之间通信的桥梁。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。MVC思想：Controller负责将Model的数据用View显示出来。MVC优点：耦合
2022-03-23 22:50:34
3203
原创 HTTP及其版本（HTTP1.0、HTTP1.1、HTTP2.0、HTTP3.0）详解
目录HTTP协议基础知识Http版本Http1.0Http1.1Http2.0HTTP协议基础知识HTTP协议是超文本传输协议的缩写，是用于从万维网传输超文本到浏览器的传输协议。HTTP基于TCP/IP通信协议来传递数据（HTML文件，图片文件、查询结果等）。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。1、特点：（1）无连接：无连接是指限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。这种方式可以节省传输时间。
2022-03-20 23:59:50
21792
8
原创 跨域及跨域方式
目录跨域前言为什么要跨域跨域的方式跨域资源共享（CORS）通过JSONP跨域跨域前言同源和跨域的相关知识，在这里就不多说了。了解请点击：同源与跨域策略简单来说：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。为什么要跨域在同源策略的限制下，是不能向工作在不同源的服务请求数据的。但是为了保护网页的安全性，不能把不同源的域名都拒之门外。这就需要跨域，来实现跨域访问的需求。在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。跨域问题是针对JS
2022-03-18 00:27:28
1438
原创 【JS】call()、apply()、bind()方法区别及原生代码实现
在上一篇文章 this指向 中，我们已经知道了this的显示绑定方法(call，apply，bind)。现在，我们来看一下这几种方法的区别以及如何使用原生代码实现这些方法的功能吧。区别call()，apply()，bind()都能用于改变this指向。（1）call()与apply()的区别：call：用法为.call(obj,arg1,arg2,…)，call的第一个参数绑定this，其余的参数是传递给调用call方法的函数的参数。apply：用法为.apply(obj,[arg1,ar
2022-03-14 23:19:49
621
原创 this指向
this指向this是js的关键字之一，它是对象自动生成的一个内部对象，只能在对象内部使用。随着使用场合的不同，this代表的值会发生变化，它并不是不变的。this绑定机制this指向取决于它在什么地方以什么方式调用，它有4种绑定机制：默认绑定，隐式绑定，显示绑定，new绑定。默认绑定函数调用时函数前面没有指定任何对象，这时this指向的是全局的对象window.注意：在严格模式下，全局对象就不能使用默认绑定了，此时的this会报undefined错误。function fn(){ /
2022-03-13 23:59:24
649
原创 Vuex详解
目录Vuex引言什么是VuexVuex原理用法Vuex引言当我们的应用遇到多个组件需要共享状态时，会需要多个组件依赖于同一状态或者是来自不同视图的行为需要变更同一状态。以前的解决办法：将数据以及操作数据的行为都定义在父组件，然后再将数据以及操作数据的行为传递给需要的各个子组件（可能需要多级传递）传参的方法对于多层嵌套的组件将会非常繁琐，并且不能进行兄弟组件间的状态传递。对于非父子组件之间的通信（父——子-子、兄弟组件），如果要进行通信，还是很麻烦的。此时使用Vuex，就可以轻松进行组件间通信。
2022-03-11 23:56:37
2078
原创 【React】Redux、React-Redux简介及应用
目录ReduxRedux简介工作流程例子React-ReduxReact-Redux简介例子ReduxRedux简介Reudx是一款JavaScript状态管理容器，除了和React配合使用，还可以配合JS、Vue使用。工作流程Redux采用的是一种发布-订阅的模式。有一个公共仓库store，这个仓库里面存储了整个应用的状态。当React组件要改变状态的时候，首先会生成一个action，然后通过dispatch函数将aciton派发给store。store会将原来的状态state和acti
2022-03-11 23:56:00
655
原创 【CSS】实现两栏布局、三栏布局
目录布局方式浮动绝对定位flex布局table布局Grid网格布局布局方式实现效果：浮动两栏布局html代码：<div class='wrap'> <div class='left'>左侧</div> <div class='right'>右侧</div></div>css代码：/* 公共部分 */body,html,.wrap{ height: 100%; padding:
2022-03-11 00:49:11
852
原创 前端性能优化（二）
目录优化原则非核心代码异步加载的方式异步加载的区别利用浏览器缓存强缓存协商缓存缓存的机制减少DNS的查找DNS预解析AJAX优化Cookie优化其他方法优化原则非核心代码异步加载的方式异步加载的三种方式：async和defer、动态脚本创建。（1）async方式<script type="text/javascript" src="xxx.js" async="async"></script>async属性是HTML5新增属性，需要Chrome、FireFox、IE9
2022-03-07 23:56:19
961
原创 Vue路由高级用法及案例
目录Vue中路由跳转的方式router-linkthis.$routerthis.$route路由重定向动态路由嵌套路由路由导航的两种方式Vue中路由跳转的方式router-link是实现跳转最简单的方法，又叫做标签式导航。<router-link to='需要跳转到的页面的路径'>文本<router-link>浏览器在解析时，将它解析成一个类似于 的标签。（1）不带参数<router-link :to="{name:'home'}"><router
2022-01-30 13:40:09
1901
原创 Vue路由——vue-router
前端路由与后端路由路由路由（routing）：指从源到目的地时，决定端到端路径的决策过程。路由分为两大类：前端路由和后端路由。后端路由后端路由是指：请求方式，请求地址与function处理函数之间的对应关系。例如在node.jszhong ,express路由的基本用法如下：const express=require('express');const router=express.Router()router.get('/login',function(req,res){ 路由的处理函数
2022-01-30 13:39:55
9500
6
原创 Vue的ref引用及插槽
ref引用ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。（可用于访问子组件实例或子元素）<p ref='p'>hello</p><child-component ref='child'></child-component>当v-for用于元素或组件的时候，引用的信息将是包含DOM节点或组件实例的数组。注意：因为ref
2022-01-30 13:39:41
1643
原创 Vue生命周期详解
每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是Vue生命周期。Vue官网上对于生命周期的图片描述：（1）beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。（2）created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。（3）before
2022-01-30 13:39:24
501
原创 前端性能优化方法（一）
在打开一个网页时，我们希望网页显示出来的越快越好。那么我们怎样做才能优化页面性能，提高页面加载速度呢——前端性能优化方法
2022-01-15 21:57:05
7539
原创 Vue脚手架搭建及vue项目创建【详细教程】
Vue脚手架Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具，cli是（command-line-interface ）命令行界面。补充：单页面应用程序单页面应用程序简称SPA，指一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。特点：将所有的功能局限于一个web页面中，仅在该web页面初始化时加载相应的资源（JS，CSS，Html）一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利
2022-01-12 21:41:34
43778
1
原创 Vue数据及事件绑定、filter过滤器
目录Vue数据绑定单向绑定双向绑定值绑定事件绑定事件处理器事件修饰符键值修饰符class与style绑定绑定class绑定内联样式filter过滤器Vue数据绑定单向绑定将Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。（模型——>视图）单向绑定的实现过程是：所有数据只保存一份。一旦数据变化，就去更新页面（只有data——>DOM，没有DOM——>data）若用户在页面上做了更新，就手动收集（双向绑定式自动收集），合并到原有的数
2022-01-11 22:51:55
969
原创 Vue实例属性及其区别、三种模板、模板渲染
Vue实例属性computed，methods，watch的用法及其区别，vue三种模板，vue模板渲染
2022-01-10 21:29:46
745
原创 Vue指令总结
Vue的指令（1）v-show：根据表达式的真假值来显示和隐藏元素。（2）v-html：插入标签。（3）v-text：在元素中插入值。（4）v-if和v-else：根据表达式的真假值来动态插入（真）和移除（假）元素。补充：v-if和v-show的性能比较：（1）实现方式：v-if底层采用的是appendChild来实现的v-show通过样式的display控制标签的显示（2）加载性能：v-if加载速度快，v-show加载速度慢（3）切换开销：v-if切换开销大，v-sho
2022-01-10 21:03:12
490
原创 axios请求方法总结
axios请求axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，它对ajax进行了封装，可以实现异步请求。使用方法（1）axios的安装：npm install axios;（2）在模块中导入axios：import axios from "axios"; //引入axios，用于ajax请求请求方式get请求（1）不带参数：axios.get('/url').then(res=>{ console.log(res)}).cat
2022-01-02 21:45:00
1274
原创 Ajax及jQuery对ajax的封装
Ajax什么是Ajax?Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。（Ajax技术实现了网页的局部数据刷新）Ajax的核心是XMLHttpRequest对象，该对象在使用之前必须用JavaScript来获取。AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaS
2021-12-28 23:06:29
910
原创 前端页面请求转发（forward）与重定向（redirect）
页面跳转有两种实现方式：请求转发和页面重定向。请求转发（forward)请求转发可以理解成是服务器端的行为。客户端发起一次请求，这个请求在整个服务端可以被多次传递，但都是由服务器端的处理程序传递给另一个处理程序，客户端不需要发起二次请求，无论这个请求经历过多少个处理程序，始终都是同一个请求，也就意味着，这个请求中的数据经历过的每一个程序都可以使用。在同一个请求中request范围中的数据不会丢失。当使用了请求转发后，在客户端浏览器地址中不会显示出转向后的地址；服务器内部转发，整个过程处于同一个请求当中
2021-12-26 18:49:53
6621
原创 React生命周期
目录React生命周期组件挂载组件更新组件卸载实例总结React生命周期每个组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。组件的生命周期可分成三个状态：Mounting(挂载)：已插入真实 DOMUpdating(更新)：正在被重新渲染Unmounting(卸载)：已移出真实 DOM组件挂载（1）组件的构造(初始化)：通过调用constructor()构造函数来实现。为组件定义了状态机时必须有构造函数：使用this.state= { }
2021-12-21 19:45:29
280
原创 事件委托原理及案例
事件委托原理：事件冒泡不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每一个子节点。简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。优点：只操作一次DOM,提高了程序的性能。<ul> <li>第一个子节点</li> <li>第二个子节点</li> <li>第三个子节点</li> <li>第四个子节点</li&
2021-12-11 17:49:09
1310
原创 React三大属性（props，state，refs）
目录React三大属性Propsstaterefs有关React基础知识及组件相关知识，请移步React框架简介（JSX语法、组件、虚拟DOM渲染）React三大属性Props既然React组件可以通过JavaScript函数方式实现， 那么React组件就可以接受参数的传入。React框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。1、每个组件都有props属性；2、组件的属性值都保存在props中；3、通过props可以在组件外部向组件内部传递参数；4、在
2021-12-05 20:37:15
714
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人