「已注销」-CSDN博客

原创优化 vue 使用 webpack 打包，出现的缓存问题及项目部署问题

vue 项目每一次打包上线，都会有浏览器缓存问题，需要用户手动清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：缓存问题方法一在index.html文件添加如下代码<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">&.

2022-05-18 16:46:09 5079 2

原创前端知识思维导图

前言Web前端技术由 html、css 和 javascript 三大部分构成，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文主要对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。因为知识点过多，导出图片会出现失真，所以此处只显示了大概知识点，需要查看具体内容的，可以点击前端地位导

2022-05-17 16:06:53 1543

原创前端开发教程及常用网站（持续更新中......）

HTML && CSS视频教程HTML学习笔记CSS学习笔记HTML && CSS 查漏补缺笔记Sass文档Javascript官方笔记视频教程 – 壹视频教程 – 贰项目教程学习笔记TypeScript官方文档入门文档视频教程 – 尚硅谷视频教程 – 千锋Webpack官方文档视频教程JQuery官方文档视频教程Ajax基础文档视频教程

2022-04-29 16:43:01 321

原创 React进阶 - 路由

SPA理解单页Web应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的链接不会刷新页面，只会做页面的局部更新数据都需要通过ajax请求获取，并在前端异步展现路由理解路由定义一个路由就是一个映射关系（key:value）key为路径，value可能是function或component路由分类后端路由：理解：value是function，用来处理客户端提交的请求注册路由：router.get(path,functio

2022-03-23 14:36:02 163

原创 React进阶 - 配置代理、组件传参

配置代理方式一在package.json文件中添加如下代码"proxy": "http://localhost:8091" // proxy的值替换为需要解决跨域的地址⚠️ 说明：优点：配置简单，前端请求资源时，可以不加任何前缀缺点：只能配置一个地址方式二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则const proxy = require('http-proxy-middleware

2022-03-20 17:17:48 1339

原创 React进阶 - React脚手架

创建项目并启动全局安装：npm i -g create-react-app切换到要创建项目的文件夹，使用命令：create-react-app hello-react进入项目文件夹：cd hello-react启动项目：npm start:⚠️上述操作也可以使用yarn进行安装React脚手架项目结构public – 静态资源文件夹favicon.icon – 网站页签图标index.html – 主页面logo192.png – logo图logo512.p

2022-03-19 17:23:00 335

原创 React基础 - 虚拟DOM与Diff算法

虚拟DOM原理当Node节点的更新，虚拟DOM会比较两棵DOM树的区别，保证最小化的DOM操作，使得执行效率得到保证。计算两棵树的常规算法是O(n^3)级别，所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。虚拟DOM图解常见面试题react/vue中的key有什么作用？（key的内部原理是什么？）为什么遍历列表时，key最好不要用index？虚拟DOM中key的作用：简单地说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用详细的说

2022-03-17 10:33:03 282

原创 React基础 - 生命周期

理解组件从创建到死亡会经历一些特定的阶段React组件中包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作生命周期（旧）初始化阶段：由ReactDOM.render()触发 – 初次渲染constructor()componentWillMount()render()：初始化渲染或更新渲染调用componentDidMount()：在此钩子中做初始化的事，例如：开启定时器、发送网络请求、订阅消息更新阶段：由

2022-03-16 16:23:08 1212

原创 React基础 - 表单及高阶组件

理解受控组件就是可以被 react 状态控制的组件在 react 中，input、textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入非受控组件代码演示<script src="../js/r

2022-03-13 18:11:21 1124

原创 React基础 - 三大属性

state完整案例<script type="text/babel"> // 创建类组件 class Weather extends React.Component { constructor(props) { super(props); this.state = { isHot: true }; // 解决changeWeather中this指向问题 this.c

2022-03-13 16:52:07 1274

原创 React基础 - 简介及基本使用

简介官网中文官网英文官网特点声明式编码组件化编码React Native 编写原生应用高效（优秀的Diffing算法）react高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。基本使用相关库react.js：React核心库react-dom.js：提供操作DOM的react扩展库babel.min.js：解析JSX语法代码转为JS代码的库创建虚拟DOM的两种方式纯JS方式(一般不用)

2022-03-11 09:47:39 123

原创 Vue进阶 - Vue3

Vue3在年后第一个工作日正式发布，官方文档创建（两种）使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue_test## 启动cd vue_testnpm

2022-02-11 17:06:02 990

原创 Vue进阶 - 路由

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配置项://引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../component

2022-02-06 16:10:01 133

原创 Vue进阶 - vuex

Vuex概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信Vuex使用时机多个组件依赖于同一状态来自不同组件的行为需要变更同一状态Vuex原理图Vuex环境搭建创建文件：src/store/index.js// 引入Vue核心库import Vue from 'vue'// 引入Vueximport Vuex from 'vuex'// 应用Vuex插件

2022-02-02 16:21:47 1012

原创 Vue进阶 - 插槽

作用让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件分类默认插槽、具名插槽、作用域插槽使用方式默认插槽// 父组件<Category title="美食"> html结构</Category>// 子组件<template> <div class="category">  <slot>插槽默认内容&lt

2022-01-10 17:03:01 342 1

原创 Vue进阶 - 配置代理

方式一在vue.config.js中添加如下配置：devServer: { proxy: 'http://localhost:4000' // 请求地址}说明：优点：配置简单，请求资源时直接发给前端（8080）即可缺点：不能配置多个代理，不能灵活的控制请求是否走代理工作方式：若按照上述配置代理，当请求了前端不存在资源时，那么该请求会转发给服务器（优先匹配前端资源）方式二编写vue.config.js配置具体代理规则：devServer: { proxy: {

2022-01-10 14:21:25 181

原创 Vue进阶 - 自定义事件

定义一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）绑定方式一：在父组件中<School @schoolName="getSchoolName" />或<School v-on:schoolName="getSchoolName" />方式二：在父组件中：<School ref="school" />......mounted(

2021-12-30 16:44:53 571

原创 Vue进阶 - 组件传参

父子组件传参父传子一般都是需要传动态的值，所以需要v-bind绑定，当然，传递的值也可以是数字、对象、数组等等子组件中接受父页面传过来的值，有几点需要了解：组件实例的作用域是孤立的子组件要显式的用props选项声明它预期的数据示例：父组件// 定义数据data() { return { todos: [ { id: "001", title: "看书", done: true }, { id: "002", tit

2021-12-30 16:39:45 968

原创 Vue进阶 - VueCli相关知识点

不同版本的Vuevue.js与vue.runtime.xxx.js的区别vue.js是完整版的vue，包含：核心功能+模板解析器vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到createElement函数去指定具体内容ref属性被用来给元素或子组件注册引用信息（id的替代者）应用再html标签上获取的是真实DOM元素，应用

2021-12-21 17:11:05 418

原创 Vue进阶 - Vue组件

使用步骤定义组件（创建组件）注册组件使用组件（写组件标签）非单文件组件定义组件使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别区别如下：el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器data必须写成函数，避免组件被复用时，数据存在引用关系备注：使用 template 可以配置组件结构。// 创建组件const schoolConstruct

2021-12-21 09:56:12 491

原创 Vue基进阶 - Vue生命周期

定义生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子它是Vue在关键时刻帮我们调用的一些特殊名称的函数生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的生命周期函数中的this指向是vm或组件实例对象原理图beforeCreate( 创建前 )在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。created ( 创建后）实例

2021-12-11 21:25:11 816 1

原创 Vue - Vue指令进阶

v-bind：单向绑定解析表达式，可简写为:xxxv-model：双向数据绑定v-for：遍历数组/对象/字符串v-on：绑定监听事件，可简写为@v-if：条件渲染（动态控制节点是否存在）v-else：条件渲染（动态控制节点是否存在）v-show：条件渲染（动态控制节点是否展示）v-text作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会<!DOCTYPE html><html lang="en">

2021-12-10 21:00:36 725

原创 Vue基础 - Vue数据监测原理

更新时的问题<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.

2021-12-09 15:39:30 1316

原创 Vue基础 - Vue语法

模板语法Vue模板语法有两大类1、插值语法功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性2、指令语法功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）举例：v-bind:href='xxx'或简写为:href='xxx'，xxx同样要写js表达式，且可以直接读取到data中的所有属性备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子3、示例<!DOCTYPE html>&l

2021-12-08 16:14:20 991

原创 Vue基础 - 样式绑定

对象语法v-bind:class设置一个对象，动态切换class// 样式是否起作用，根据isActive的布尔值是否为true<div :class="{'active':isActive}">xxx</div>:class可以和class共存/*当isActive值为true，isError为false，样式为 static和isActive。当isActive值为false，isError为true，样式为 static和isError。当isActive值为

2021-12-06 17:20:54 174

原创 Vue基础 - 计算属性与监听属性

计算属性(computed)定义要用的属性不存在，要通过已有属性计算得来原理底层借助了Object.defineproperty方法提供的getter和setter执行时机初次读取时会执行一次当依赖的数据发生改变时会被再次调用优势与methods实现相比，内部有缓存机制（复用），效率更高，调试方便备注计算属性最终会出现在vm上，直接读取使用即可如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生变化<!DOCTYPE html&gt

2021-12-06 11:42:01 487

原创 Vue基础 - el - data - MVVM - 数据代理

el与data的两种写法1、el有两种写法new.Vue时配置el属性先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2、data有两种写法对象式函数式如何选择：在使用组件时，data必须使用函数式，否则会报错3、一个重要原则 - 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了<!DOCTYPE html><html lang="en"><head> <m

2021-12-05 15:11:23 373

原创 Vue基础 - 初识Vue

Vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用简单应用：只需要一个轻量小巧的核心库复杂应用：可以映入格式各样的Vue插件Vue官网： https://cn.vuejs.org/Vue的特点1、采用组件化模式，提高代码复用率、切让代码更好维护2、声明式编码，让编码人员无需直接操作DOM，提高开发效率3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点搭建Vue开发环境1、引入Vue方式一：下载方式二：CDN 对于制.

2021-12-03 20:17:56 335

原创 map原理解析

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map不改变原数组map返回数组元素操作后的值，就是一定有返回值map遍历一次产生一个返回值var arr = [1,4,9,16];const map1 = arr.map(x => x *2);console.log(map1); // [2,8,18,32]而如下写时：var arr = [1, 4, 9, 16];const map1 = arr.map(x => {

2021-05-08 16:05:28 646

原创 Git知识总结

Git安装进入网站https://git-scm.com/下载相应版本并安装，然后在cmd命令行配置初始化GitGit三个阶段工作区（Working Directory）、暂存区（Staging Area）、git目录（git directory / Repository）初次运行配置// 通过如下命令查看所有配置及所在文件夹git config --list --show-origin配置用户信息git config --global user.name '用户名'git co

2021-04-21 15:36:56 84

原创 formData实现批量上传图片

formData 主要用于发送表单数据，但是也可以用来发送键值对数据(key:value)，如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit()方法来发送数据，从而，发送数据具有同样形式前言项目要求实现图片批量上传，在此记录实现此功能的方法代码var formData = new FormData();for (var i = 0; i < fileArray.length ; i++){ formData...

2021-04-18 13:01:02 928

原创 ajax与fetch

ajax与fetch都是前端开发过程中常用到的数据请求方式。fetch是一种http数据请求的方式，是XMLHttpRequest的一种替代方案；ajax使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。ajax创建XMLHttpRequest对象创建HTTP请求（调用open方法设置基本请求信息）发送请求注册事件获取返回数据，对页面进行更新//1.创建Ajax对象 if(window.XMLHttpRequest){

2021-04-06 17:06:27 927

原创前端面试题合集（持续更新中......）

HTML、CSS1、元素水平垂直居中• 定位偏移 top，left为50%，margin-left，margin-top自身的-50%• 定位平移 top，left，bottom，right为0，margin为auto• 定位平移 top，left为50%，transform：translate(自身的50%)• 弹性盒主轴与交叉轴居中• 表格父block，子table-cell2、C3新特性1 圆角边框：border-radius 2 多背景图：background 3

2021-03-30 15:55:44 710

原创 event.path兼容性问题

问题：在项目开发时，有时需要获取冒泡或捕获过程的所有元素解决方案： Chrome通过event.path获取：element.onClick(event) { const ev = window.event || event; const path = ev.path;} event.path属性在Chrome和Opera浏览器下没问题，但是在Firefox和Safari中发现event并没有path属性所以在Firefox...

2020-11-24 16:09:37 5918 1

原创【Git笔记】Git安装及操作指南

什么是GitHub？GitHub是世界上最大的软件远程仓库，是一个面向开源和私有软件项目的托管平台，使用Git做分布式版本控制；使用GitHub,首先要会使用Git常见的版本控制工具：CVS、SVN、Git可参考：https://www.jianshu.com/p/47f79a13524f什么是Git？Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理；国外的GitHub和国内的Coding都是项目的托管平台如何安装Git？1、查看系统是否已安装Git

2020-09-13 20:12:24 148

原创【JavaScript笔记】jQuery类库

jQuery是一个JavaScript库，其极大地简化了JavaScript编程。jQuery具体概念可参考：http://jquery.com/ 或http://www.jquery123.com/1、jQuery引入：方式一：引入本地的Jquery的文件方式二：采用cdn（内容分发网络）方式地址：https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js2、$符号介绍$是jQuery别名。可以..

2020-08-10 21:46:21 209

原创【JavaScript笔记】继承

面向对象的继承：子类继承父类，但子类不影响父类面向对象开发的两种方式：1、混合开发(构造函数+原型) -- 混合继承【构造函数继承call/apply+原型继承(拷贝继承/原型链继承)】构造函数继承call/apply// 创建Person类function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex;}// Person原型对象...

2020-07-23 16:00:00 128

原创【JavaScript笔记】原型与原型链

原型对象：每一个构造函数都有一个 prototype 属性，指向另一个对象。这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有function Star(uname, age) { this.uname = uname; this.age = age;}Star.prototype.sing = function() { console.log('我会唱歌');}var ldh = new Star('刘德华', 18);var zx

2020-07-22 22:40:43 354

人事管理系统项目实战视频资料

空空如也