前端学习
文章平均质量分 66
学习前端,解析前端面试题目
monkeyhlj
计算机专业学员,希望大家一起进步!加油!
Github: https://github.com/monkeyhlj
Gitee: https://gitee.com/monkeyhlj
展开
-
实现一个简单的模板引擎,输入模板和数据,输出html
实现一个简单的模板引擎,输入模板和数据,输出html示例:输入:"<div>{{$1}}({{$2}}){{$3}}</div>",["第一个","第二个","第三个"]输出:"<div>第一个(第二个)第三个</div>"function tpl(templateStr, arr) { const reg = /\{\{([^}]*)\}\}/g; const string = templateStr.trim().repla原创 2021-08-08 16:54:41 · 523 阅读 · 0 评论 -
Redux-学习笔记
文章目录Redux-学习笔记安装ReduxRedux简介(为什么要用Redux?)Redux和ReactReact-reduxredux-actions使用项目打包Redux-学习笔记安装Reduxredux需要安装以下依赖:cnpm install redux --savecnpm install react-redux --savecnpm install redux-actions --save@connect装饰器报错处理因为用到了es6/7的语法,需要安装babel转码npm原创 2021-08-04 09:31:19 · 99 阅读 · 0 评论 -
React学习:路由定义及传参、数据复用-学习笔记
文章目录React学习:路由定义及传参、数据复用-学习笔记在React中使用react-router-dom路由简单例子路由定义及传参React学习:路由定义及传参、数据复用-学习笔记在React中使用react-router-dom路由使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,react-router和react-router-dom。安装首先进入项目目录,使用npm安装react-router-dom:cnp原创 2021-08-03 21:24:08 · 362 阅读 · 1 评论 -
Vue源码分析
文章目录Vue源码分析vue源码Object.definePropertymvvm虚拟domDIFF算法Vue源码分析vue源码Object.defineProperty数据劫持依赖DepWatcherxxxMinxin(混合)proxy(代理)Object.defineProperty动态给对象添加属性实现属性的访问拦截访问属性 obj.name 一定会调用get方法写入属性 obj.name=xxx 一定会调用set方法<!DOCTYPE html>&原创 2021-08-03 09:47:06 · 126 阅读 · 0 评论 -
前后端分离项目部署(服务器或本地)
文章目录前后端分离项目部署(服务器或本地)前端部署(以vue项目为例)后端部署(以Springboot项目为例)前后端分离项目部署(服务器或本地)前端部署(以vue项目为例)部署环境:Nginx配置文件:vue.config.js更多可见此文章vue项目打包与配置-学习笔记(vuecli4):https://blog.csdn.net/hhhmonkey/article/details/119004525以下是vuecli2:CDN优化:module.exports = { ...原创 2021-08-02 21:26:15 · 2343 阅读 · 5 评论 -
React学习:脚手架搭建、antd引入-学习笔记
文章目录React学习:脚手架搭建、antd引入-学习笔记脚手架搭建项目目录结构antd引入React学习:脚手架搭建、antd引入-学习笔记脚手架搭建npm install -g create-react-app //安装create-react-app react-demo // react-demo 项目的名称cd react-demo //cd 进入下一级npm start //npm run start可能会出现的问题1:端口占用解决:结束进程原创 2021-07-31 11:31:21 · 374 阅读 · 0 评论 -
React学习:ref调用、组件封装调用-学习笔记
文章目录React学习:ref调用、组件封装调用-学习笔记ref调用-string形式ref调用-回调形式(官方推荐)ref调用-父调子组件封装调用demo(全选)demo1(单组件)demo1(重构-多组件)React学习:ref调用、组件封装调用-学习笔记ref调用-string形式<!DOCTYPE html><html> <head> <title>ref</title> <meta charset="UT原创 2021-07-30 20:35:58 · 391 阅读 · 0 评论 -
React学习:生命周期、过滤器、event、axios-学习笔记
文章目录React学习:生命周期、过滤器-学习笔记生命周期过滤器webapp小例子:React学习:生命周期、过滤器-学习笔记生命周期组件的生命周期可分成三个状态:Mounting:已插入真实 DOM(挂载)Updating:正在被重新渲染(更新)Unmounting:已移出真实 DOM(卸载)MountingcomponentWillMount() 组件将要挂载componentDidMount() 组件完成挂载UpdatingcomponentWillReceivePr原创 2021-07-29 17:58:40 · 118 阅读 · 0 评论 -
React学习:组件之间的关系、参数传递-学习笔记
文章目录React学习:组件之间的关系-学习笔记父到子传递参数子-父父-孙兄弟组件传参React学习:组件之间的关系-学习笔记父到子传递参数<!DOCTYPE html><html> <head> <title>组件传参(父-子)1</title> <meta charset="UTF-8" /> <script src="js/react.development.js"></scr原创 2021-07-29 13:19:29 · 97 阅读 · 0 评论 -
React学习:双向数据绑定、约束性和非约束性组件-学习笔记
文章目录React学习:双向数据绑定、约束性和非约束性组件表单 约束性和非约束性组件(受限/非受限)双向数据绑定小例子React学习:双向数据绑定、约束性和非约束性组件表单 约束性和非约束性组件(受限/非受限)约束性 由react 管理了value(value不再是死值,this.state.value)<input type="text" value={this.state.value} onChange={(e)=>this.handleChange(e)} />原创 2021-07-28 21:53:21 · 172 阅读 · 0 评论 -
React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录React学习:事件绑定、组件定义、for、map循环-学习笔记事件绑定组件定义 (参数传递)for、map循环React学习:事件绑定、组件定义、for、map循环-学习笔记事件绑定<!DOCTYPE html><html> <head> <title>react-tab多选项切换</title> <meta charset="UTF-8" /> <meta http-equiv="X原创 2021-07-28 17:25:41 · 374 阅读 · 0 评论 -
React学习:入门实例-学习笔记
文章目录React学习:入门实例-学习笔记React的核心需要引入三个库什么是JSXreact渲染三步骤React学习:入门实例-学习笔记React的核心1、组件化:把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成2、虚拟DOM:为了实现页面中DOM元素的高效更新DOM和虚拟DOM的区别:DOM: 浏览器中,提供的概念,用JS对象,标识页面上的元素,并提供了操作元素的API虚拟DOM: 是框架的概念; 而是开发框架的程序员,手动用JS对象来模拟D原创 2021-07-28 16:16:59 · 163 阅读 · 0 评论 -
前端必备-防抖节流
文章目录前端必备-防抖节流前端必备-防抖节流防抖节流—优化思想js中有一个工具:lodash 实现了防抖节流防抖:debounce 、节流:throttle<html><head> <title>防抖和节流</title> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script></hea原创 2021-07-27 10:41:50 · 206 阅读 · 0 评论 -
vue项目打包与配置-学习笔记
文章目录vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试)打包手动配置文件打包压缩,大文件处理gzip进一步压缩打包app打包部署模式vue项目打包与配置-学习笔记前端打包npm run build– package.json -- vue-cli-service build– 发布到线上的代码,不便于调试打包发布到测试环境–增加打包命令 开发(后端地址) 测试(后端地址) 线上(后端地址)–npm run build:dev --开发原创 2021-07-22 20:39:35 · 6302 阅读 · 4 评论 -
Scss、elementUI引入、transition动画 - 学习笔记
文章目录Scss、elementUI引入、transition动画 - 学习笔记Sass 是什么?elementUItransition动画Scss、elementUI引入、transition动画 - 学习笔记Sass 是什么?官网:https://www.sass.hk/guide/Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的原创 2021-07-18 11:07:10 · 1130 阅读 · 2 评论 -
Vue学习(vuex)-学习笔记
文章目录Vue学习(vuex)-学习笔记含义理解具体代码辅助函数mapGettersmapActionsVue学习(vuex)-学习笔记含义理解StateVuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。Getter有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来原创 2021-07-15 16:46:29 · 136 阅读 · 0 评论 -
Vue学习(watch、computed、生命周期、filter)- 学习笔记
文章目录Vue学习(watch、computed、生命周期)- 学习笔记watch 监听computed 计算属性set---动态添加属性 delete---删除生命周期Vue学习(watch、computed、生命周期)- 学习笔记watch 监听<template> <div> <input type = "text" v-model="name" />姓名 {{changeName}} <input type = "text原创 2021-07-15 10:36:09 · 112 阅读 · 0 评论 -
Vue学习小案例--分页组件封装
Vue学习小案例–分页组件封装index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg原创 2021-07-15 09:11:03 · 98 阅读 · 0 评论 -
Vue学习(slot、axios)-学习笔记
文章目录Vue学习(slot、axios)-学习笔记slot 插槽axios 交互Vue学习(slot、axios)-学习笔记slot 插槽父:<template><div> testA组件:{{title}} <part2> <!-- 匿名插槽 --> <ul slot> <li>12313</li> <li>12313</li> &原创 2021-07-14 21:55:13 · 104 阅读 · 0 评论 -
Vue学习(路由定义、路由传参方式、子路由)-学习笔记
文章目录Vue学习(路由定义、路由传参方式、子路由)-学习笔记路由定义(见下单个文件)路由传参方式二级路由动态面包屑路由组件路由中的props属性(了解)路由拦截Vue学习(路由定义、路由传参方式、子路由)-学习笔记路由定义(见下单个文件)//Vue中main.js文件import Vue from 'vue'import App from './App.vue'import router from './router' //从这里引入路由import store from './store'原创 2021-07-14 20:57:53 · 505 阅读 · 4 评论 -
Vue学习(动态组件、组件路由缓存keepalive)-学习笔记
文章目录Vue学习(动态组件、组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepaliveVue学习(动态组件、组件路由缓存keepalive)-学习笔记动态组件<template><div> <button @click="flag='testA'">testA</button> <button @click="flag='testB'">testB</button> <button @c原创 2021-07-14 15:33:56 · 244 阅读 · 0 评论 -
Vue学习(组件传参)-学习笔记
文章目录Vue学习(组件传参)-学习笔记父到子Vue学习(组件传参)-学习笔记父到子Father:Son1:在这里插入代码片Son2:(可将banner作为公共的)在这里插入代码片原创 2021-07-14 14:52:23 · 104 阅读 · 0 评论 -
Vue学习(组件的定义及调用、路由)-学习笔记
文章目录Vue学习(组件的定义及调用、路由)-学习笔记Vue学习(组件的定义及调用、路由)-学习笔记原创 2021-07-13 11:48:59 · 76 阅读 · 0 评论 -
Vue学习(增删改查、ES6模块化概念)-学习笔记
文章目录Vue学习(增删改查、ES6模块化概念)-学习笔记增删改查案例ES6模块化概念Vue学习(增删改查、ES6模块化概念)-学习笔记增删改查案例<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>用户列表checkbox选项操作(全选)</title> <link rel="stylesheet" type="text/css" hre原创 2021-07-12 22:14:07 · 593 阅读 · 8 评论 -
Vue学习(常用实例、脚手架搭建)-学习笔记
文章目录Vue学习(常用实例、脚手架搭建)-学习笔记实例1法1法2实例2脚手架搭建vue2.0vue4.0Vue学习(常用实例、脚手架搭建)-学习笔记附加:阿里巴巴矢量图库:https://www.iconfont.cn/实例1法1* { padding: 0px; margin: 0px;}ul { list-style-type: none;}a { color: #333; text-decoration: none;}bod翻译 2021-07-11 20:46:32 · 115 阅读 · 0 评论 -
Vue学习(入门实例、常用指令)-学习笔记
文章目录Vue学习(入门实例、常用指令)-学习笔记实例常用指令v-onv-bindv-forv-htmlv-ifeventv-model双向数据绑定实现Vue学习(入门实例、常用指令)-学习笔记实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init原创 2021-07-11 11:58:50 · 146 阅读 · 1 评论 -
Vue学习(MVVM、入门练习)-学习笔记
文章目录Vue学习(MVVM、入门练习)-学习笔记入门实例Vue学习(MVVM、入门练习)-学习笔记入门实例<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script type="text/javascript" src='js/vu原创 2021-07-10 22:45:38 · 106 阅读 · 0 评论 -
TS基础2(泛型、枚举、元组)-学习笔记
文章目录TS基础2(泛型、枚举、元组)-学习笔记枚举元组TS基础2(泛型、枚举、元组)-学习笔记 //泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 //<T> 泛型变量T T表示什么?任何类型 function hello<T>(name:T):T{ //hello函数是泛型 return name }; //hello<string>原创 2021-07-10 20:54:48 · 282 阅读 · 1 评论 -
TS基础2(类)-学习笔记
文章目录TS基础2(类)-学习笔记class类类的继承修饰符类的类型、实现接口TS基础2(类)-学习笔记class类 //类 class //首字母大写 //类(Class):定义了一件事物的抽象特点,包含它的属性和方法 class A { //定义类,名称为A } //ES5 function Person(name,age){ this.name = name; this.age = age;原创 2021-07-10 18:06:39 · 287 阅读 · 0 评论 -
TS基础1(类型定义、接口)-学习笔记
文章目录TS基础1(类型定义、接口)-学习笔记什么是TSTS基础1(类型定义、接口)-学习笔记什么是TS原创 2021-07-10 15:34:52 · 288 阅读 · 1 评论 -
ES6基础5(Promise)-学习笔记
文章目录ES6基础5(Promise)-学习笔记jquery中串行并行async-await微任务 宏任务ES6基础5(Promise)-学习笔记 //回调陷阱 $.ajax({ type:'get', url:'A', success:function(A){ $.ajax({ type:'get', url:'B/'+A,原创 2021-07-10 10:43:59 · 112 阅读 · 1 评论 -
ES6基础4(数据结构)-学习笔记
文章目录ES6基础4(数据结构)-学习笔记setmapsymbolES6基础4(数据结构)-学习笔记set //set 数据结构 类似数组 成员信息唯一性 var s = new Set(); //添加数据 add() s.add(1).add('2').add(2); //添加数据 另一种写法 var s2 = new Set([1,2,3,4,5]); var arr = [1,2,3,4,5]; var s3 = new S原创 2021-07-09 19:42:24 · 71 阅读 · 0 评论 -
ES6基础3(扩展)-学习笔记
文章目录ES6基础3(扩展)-学习笔记字符串扩展数值扩展函数扩展扩展运算符ES6基础3(扩展)-学习笔记字符串扩展 //扩展 //字符串扩展 charAt(); //返回指定索引位置的字符 //var str = "hello world"; str.charAt(2) //l indexOf(); //返回字符串中检索指定字符第一次出现的位置 //var str = "hello world"; str.indexOf('o'原创 2021-07-09 16:24:48 · 95 阅读 · 0 评论 -
ES6基础2(块级作用域、数组对象解构)-学习笔记
文章目录ES6基础2(块级作用域、数组解构)-学习笔记块级作用域数组解构对象解构ES6基础2(块级作用域、数组解构)-学习笔记块级作用域 //let const 块级作用域 var 函数作用域 var a = 100; if(true) { var a = 1000; //块级作用域 }; var a = 100; function f(){ console.log(a); if(true)原创 2021-07-09 10:12:01 · 78 阅读 · 1 评论 -
ES6基础(var let const 箭头函数)-学习笔记
文章目录ES6基础ES6基础原创 2021-07-08 22:03:14 · 159 阅读 · 0 评论 -
JavaScript预解析、作用域题目记录
JavaScript预解析、作用域题目记录写出以下题目执行的结果及过程分析function fun ( n ) { console.log( n ); var n = 456; console.log( n );}var n = 123;fun( n );function fun () { console.log( n ); var n= 456; console.log( n );}var n = 123;fun( n );function fun ()原创 2021-07-08 21:08:07 · 875 阅读 · 9 评论 -
JS之设计模式
文章目录JS之设计模式工厂模式单例模式观察者模式模板模式适配器模式代理模式JS之设计模式## 软件开发设计流程需求----分析----设计-----编码----测试----部署----运维## 开发方式### 瀑布式(假设需求没有变化,不会重复)需求----分析----设计-----编码----测试----部署----运维### 迭代式(敏捷)没有需求或需求完全不明确不断迭代下面的阶段,需求在不断变化需求----分析----设计-----编码----测试导致代码量不断增长----重复原创 2021-07-08 17:28:45 · 67 阅读 · 0 评论 -
JS-跨域及其处理
文章目录JS-跨域及其处理cors跨域配置nginx配置jsonphttp协议 、 http封装JS-跨域及其处理参考例子:https://blog.csdn.net/hhhmonkey/article/details/118528784## 跨域多种处理方式什么是跨域?浏览器----同源策略----保护源-----域名 协议 端口(默认端口不显示)http://www.baidu.com 80https://www.baidu.com 443http://www.baidu.com/a原创 2021-07-08 10:24:48 · 151 阅读 · 0 评论 -
JavaScript进阶5-学习笔记
文章目录JavaScript进阶4-学习笔记JavaScript进阶4-学习笔记参考理解:https://blog.csdn.net/hhhmonkey/article/details/118515517前后端分离Node是什么?是js的运行环境,windows/linux/macosexpress--node一个web框架, 构造后端的接口服务依赖管理工具:1.npm, node自带, 安装依赖包从国外下载,速度较慢2.cnpm, 需要手动安装,从国内下载,速度较快3.yarn,原创 2021-07-07 19:44:06 · 174 阅读 · 0 评论 -
JavaScript进阶4-学习笔记
文章目录JavaScript进阶4-学习笔记递归JavaScript进阶4-学习笔记前端:根据Ui写页面,使用vuecli+vue---测试功能---需要数据(json,array,字符串)----根据文档定义----根据文档可以造数据---因为后端可能没有提供---如何造数据?----模拟服务node----什么是nodejs?-----是一个运行js的环境---如何安装node环境---下载nodejs并安装我是前端为什么要学后端Node?----1.容易上手,因为它是js, 2.模拟服务原创 2021-07-06 16:41:01 · 119 阅读 · 0 评论