- 博客(31)
- 收藏
- 关注
RSS订阅原创 react学习——组件传值
组件传值1.父子传值父向子 属性传子向父 事件传 事件在父上定义，绑定在属性上给子，子调用时传参，父接收import React, { Component } from "react";class Demo extends Component { render() { return ( <div> <h3>Demo子组件{this.props.haha}</h3> {/* 要在点击事件的时候传值，不要
2021-01-08 16:49:56
138
原创 react学习——生命周期
组件的生命周期生命全周期图React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理1.初始化在初始化阶段会执行constructorstatic getDerivedStateFromProps()render()componentDidMount()各生命周期详解(1) constructor(props)React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在
2021-01-08 00:08:36
223
原创 react学习——受控组件及非受控组件及ref获取dom节点
react 创建项目的两种方式1.npm 全局安装npm install -g create-react-appcreate-react-app my-react-app一般安装到了你的npm文件夹下设置在系统的环境变量里面2.npx 非全局安装// 现将 my-react-app下载到本地，用完删除npx create-react-app my-react-app受控表单(受控组件)什么是表单??在React里，HTML表单元素的工作方式和其他的DOM元素有些不同，这是
2021-01-07 13:26:06
220
原创 react学习——state状态及事件处理
状态 statereact中的内置属性在类里面定义变量 对象插件 react 里面的 dev-tools里面内置了一个 setState方法实质是——重新执行了render方法，模板重新编译了一次，里面有diff算法，没更改的不会替换。react 改变视图的最简单的方式。例子1状态定义的两种方式1.类属性的方式2.构造函数中定义状态为什么用箭头函数？？事件实质上是 冒泡到 根节点的 ，react里面是合成事件。多个状态的改变 批量更新修改状态的两种方式1.setStat
2021-01-07 00:14:20
563
原创 react学习——react组件、属性传递、属性校验、插槽
三种组件的创建方式1.类组件里面包含状态和生命周期，用于复杂的动态的数据交互在react中 没有全局组件和局部组件之分定义组件的规则组件名称开头要大写组件继承Component/PureComponent类组件使用class来定义组件中要实现一个render方法render方法中 要返回一段 jsxApp.jsimport React, { Component } from 'react'//引入组件import MySmile from './my-smile'im
2021-01-06 18:08:29
690
原创 JS学习之——原型，原型链
JS中一切皆对象基本包装类型var boo=truevar num=123var str='abc'对象可以直接设置一个属性，但是基本包装类型不能，那么var letter = str.charAt(0)上述的charAt()方法是哪里来的呢？？？？？解释：底层做了三个工作根据当前的数据类型，生成一个临时的类型对应的对象_str = new String('abc')对象上有方法，使用对象执行方法var letter = _str.charAt(0)得到这个值，赋
2021-01-06 18:06:27
100
原创 JS学习之——闭包
什么是闭包？闭包就是 能够读取其他函数内部变量的函数闭包是指有权访问另一个函数作用域中变量的函数创建闭包最常见的方式就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链闭包的特性：函数内再嵌套函数内部函数可以引用外层的参数和变量参数和变量不会被垃圾回收机制回收说说你对闭包的理解使用闭包主要是为了设计私有的变量和方法闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当，很容易造成泄漏在js中，函数即
2021-01-05 23:56:13
91
原创 HTTP学习之——HTTP协议
HTTP协议前后端数据交互基于HTTP协议包括 客户端 和 服务端 两个实体客户端发送请求给服务端，服务端返回响应给客户端在http中的数据称为资源，可以是html文档、图片、文本资源是通过url进行定位的，当客户端需要访问服务器端资源时，首先需要知道资源的urlurl的组成部分有 协议，主机，端口号，路径，查询参数服务端收到url会解析他们，并返回相应的数据HTTP协议和HTTPS协议的区别HTTPS协议需要证书HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的
2021-01-05 21:46:22
92
1
原创 HTTP学习之——https通信原理与TLS握手机制
https 通信原理https = http + TLS/SSLhttps 是在 http基础上提供了数据加密的支持，保证了数据私密性和完整性，并且可以用来验证客户端和服务器身份在 http 协议中，数据是明文传输的，很容易有中间人窃听数据，并对客户端把自己伪装成服务器，对服务器把自己伪装成客户端，进而非法获取通信数据。而在 https 中，数据是加密传输的，利用了非对称公钥加密机制，既能保证数据不被篡改，又能认证通信双方身份，基本避免了中间人攻击。https加密使用tls实现的。前身是ssl
2021-01-05 20:45:09
251
原创 Vuex学习之——初识Vuex
Vuex来自官网Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension。什么是状态管理模式一个简单的Vue计数应用// 状态管理应用包含以下几个部分：new Vue({ // state，驱动应用的数据源 data () { return { count: 0 } }, // view，
2021-01-05 18:52:21
119
原创 react学习——jsx语法
jsx语法JavaScript XML 的简称特别的地方是：允许在 JS 文件中写 HTML代码也可以在 HTML 中写 JSjsx中的规则快速生成rcc 快速生成一个类组件 react create classrfc 快速生成一个函数式组件 react function component1.App.jsx的 return 中必须有一个根元素类组件的写法// 1-导入react中的默认组件，并命名为React；// 引入react中的成员组件Component
2021-01-05 18:09:59
241
原创 react学习——初识react
react 是什么是一个js框架，js框架一般用来做网站。单页面应用。如果以MVC的模型来看，相当于view层。MVC是什么？react起源和发展facebook官方出品，2013年5月开源，觉得市面上的框架都不好用，所以自己建了一个。react 和 Vue的差异1.从程序角度上来看语法，使用不一样vue使用单文件组件：* .vue; React使用模块，*.jsxjsx react特有的语法，允许在js中，写原始的html代码react 组件：函数式组件、类组件、hock组
2021-01-05 14:23:01
98
原创 node学习之——什么是node？
node是什么？Node.js是一个基于Chrome V8 引擎的JavaScript runtime(运行环境)Node.js使用了一个事件驱动的模型，使其轻量又高效。非阻塞的I/ONode.js的包管理工具npm，是全球最大的开源库生态系统i/o:input output 输入输出流 正常情况下i/o的操作都是阻塞的(ajax同步是阻塞的)有：网络请求、数据库处理、文件的读写。。。优点高并发特别好（非阻塞的i/o）为什么要学node？1.防止甩锅，明确数据交互的错误问题在谁。
2021-01-04 23:16:20
220
转载 HTTP学习之——TCP ‘三次握手，四次挥手’
请求步骤是四次挥手1.建立连接2.前端发送请求3.后端返回响应4.断开连接前端发送的每一个请求都是以请求报文的形式发送。请求报文中主要包含请求行、请求头、请求体。请求行是指请求方式。常见的请求有八种。其中GET和POST是http请求中常用的两种方式。GET是倾向于服务器端获取数据，它可以直接在浏览器后面拼接，大小在2KB左右，会被浏览器主动缓存，采用明文发送，相对于POST不是很安全。数据格式必须是url编码格式。POST是倾向于服务器传递数据，它可以在请求体内传递过去，大小理论上是没有
2021-01-04 21:14:32
106
原创 前端面试题——null和undefined/判断数据类型
1.等<script> console.log(null == undefined) //true console.log(null === undefined) //false</script>2.定义nullNull类型，代表空值,代表一个空对象指针，使用typeof运算得到object，可以认为它是一个特殊的对象值。undefinedUndefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。3.用法null (表示’
2021-01-04 21:02:19
1951
原创 前端面试题——Web应用从服务器主动推送Data到客户端
Web应用从服务器主动推送Data到客户端有哪些方式？Ajax轮询，即定期发送请求，获取数据。Commet，即基于HTTP长连接的服务器推送技术。XHR长轮询，即服务器端定期返回数据，客户端接收数据，并再次发送请求。WebSocket，即基于Socket协议实现数据的推送。SSE(Server-Send Event)，即允许网页获取来自服务器端的更新。首先，我得知道轮询是什么？轮询（Polling）是一种CPU决策如何提供周边设备服务的方式，又称“程控输入输出”（Programmed
2021-01-04 20:15:10
844
原创 JS学习之——异步/同步
谈谈同步和异步在JavaScript中，一个线程执行的时候，不要求其他线程处理完毕，这称为异步。相反，一个线程必须等待另一个线程处理完毕才能执行，这称为同步。在JavaScript中同步与异步，阻塞与非阻塞其实没有本质的区别，因为JavaScript是单线程的。但是JavaScript的执行环境是多线程的，想要达到阻塞效果，可以通过执行alert()中断线程。谈谈异步加载和延迟加载异步加载的方案1.在HTML页面中，动态插入script标签。2.通过Ajax获取JavaScript代码，
2021-01-04 17:14:12
119
原创 JS学习之——GET和POST
GET和POST的区别是什么？GET一般用于信息获取。使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符之内。POST一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用Request.QueryString来取得变量的值，而POST方式可通过Request.From来获取变量的值。也就是说，GET通过地址栏来传值，而POST通过提交表单来传值(注意！模拟表单的POST请求在jQuery中很常见).何时使用POST？无法缓存文件(更新服务器上的文件或数据库
2021-01-04 16:34:24
830
原创 JS学习之——同源策略/跨域
同源策略1.什么是JavaScript的同源策略？同源策略是客户端脚本（尤其是JavaScript）中重要的安全度量标准。它最早出自Netscape Navigator 2.0，目的是防止某个文档或脚本从多个不同源装载。同源是指：协议、域名、端口号——完全相同。同源策略是一种安全协议，指一段脚本只能读取同一来源的窗口和文档的属性。2.为什么有同源限制？同源策略的目的就是限制不同源的document或者脚本之间的相互访问，以免造成干扰和混乱。举例：比如一个黑客，他利用iframe把真正的银
2021-01-04 16:15:42
291
原创 JS学习之——Ajax
Ajax1.理解Ajax的全称是Asynchronous JavaScript and XML(一步的JavaScript和XML)。Ajax是一种使用现有标准的新方法。是一种用于创建动态网页的技术，通过与服务器进行少量的数据交换，可以使网页实现异步更新。也就是说可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不适用Ajax）如果需要更新内容，必须重新加载整个网页。支持Ajax的浏览器有：Mozilla、Firefox、IE、Opera、Safari、Konqueror。
2020-12-31 15:48:08
167
原创 前端面试题——网站前端性能/应用程序缓存/浏览器缓存
哪些方法可以提升网站前端性能？1.静态资源文件（JavaScript和css）放在外部文件中。在实际应用中使用外部文件会提高页面速度，因为JavaScript和css文件都能在浏览器中产生缓存。而内置在HTML中额JavaScript和css会在每次请求中随HTML文档重新下载。这虽然减少了HTTP的请求次数，却增加了HTML文档的大小。2.减少cookie的体积使cookie尽可能的小以减少用户的响应时间3.样式文件放在顶部，js文件放在底部外部的JavaScript文件会阻塞其后资源的下载，
2020-12-31 14:49:45
233
原创 前端面试题——盒模型/怪异盒模型
标准盒模型在标准盒模型下，width和height是内容区域，即使content的width和height，不包括padding和border。所以，此时，一个块的总宽度 = width + padding + border + margin （都包含左右）怪异盒模型在怪异盒模型下，width和height除了内容区域外，还包括padding和border。所以，此时，一个块的总宽度 = width+margin（都包含左右，此时的width包括了padding和border）应用在文档首
2020-12-30 21:38:10
686
原创 前端面试题——HTML5和CSS3
1. 列举3个HTML5新标签，3个CSS3新特性。HTML5新标签header,nav,article,footer,section,aside,audio,video,embedCSS3新特性border-radius ,box-shadow,border-image,background-image,transition.2. HTML5实现本地临时存储和永久存贮、读取、删除一条key为c，value为xiaoming的数据。// 临时存储 sessionStorage.setIte
2020-12-30 08:31:46
196
原创 Vue学习之——Vue组件间通信
Vue组件间通信父传子：子组件使用prop接收父组件传来的值，在父组件给子组件赋值。<body> <div id="app"> <demo></demo> </div></body><script src="./node_modules/vue/dist/vue.js"></script><script> Vue.component("demo",{ // 这个父
2020-12-29 19:24:22
196
原创 Vue学习之——Vue生命周期
Vue生命周期1.什么是生命周期？Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染更新、渲染卸载等一系列过程，就称之为Vue的生命周期。2.vue生命周期的作用是什么？在Vue实例经过一系列初始化的过程中也会运行一些叫做 生命周期钩子 的函数，生命周期里面的这些事件钩子，给予用户在不同阶段可以添加自己代码的机会。3.生命周期函数Vue生命周期总共分成8个阶段：创建前后，载入前后，更新前后，销毁前后。beforeCreate(创建前)实
2020-12-29 08:30:18
196
原创 node学习之——NodeJS 的 API
NodeJS APIURLurl.parse(urlString[,parseQueryString[,slashesDenoteHost]])参数说明：urlString 转换的urlparseQueryString如果为true,query属性会变成对象，默认为falseslashesDenoteHost如果为true,默认为false ,考虑以下例子 //for/bar,会被转换成{host:'foo',pathname:'/bar'}而不是{pathname:'//foo/bar
2020-12-28 20:23:41
159
原创 node学习之——NPM入门
NPM使用入门NPM是随同NodeJS一起安装的包管理工具常用的npm命令查看版本信息npm -v // 查看版本信息本地安装和全局安装npm install express //本地安装npm install express -g //全局安装查看所有全局安装的模块npm list -g查看某个模块版本号npm list grunt卸载模块npm uninstall express更新模块npm update express使用nrm进行包管理npm ins
2020-12-28 19:51:05
94
原创 node学习之——模块与包管理器
模块与包管理器js天生的缺陷-缺少模块化的管理工具表现：容易出现变量被覆盖，方法被污染的情况var num = 123var num = 456 // 变量被覆盖了function demo(){ console.log('这是demo1的方法')}function demo(){ console.log('这是demo2的方法')}console.log(num) // 456demo() // 这是demo2的方法解决方案1：命名空间let moduleA = { n
2020-12-28 19:10:40
167
原创 Vue前端开发学习之——Vue双向数据绑定的原理
Vue 数据双向绑定的原理核心：数据代理+发布订阅描述： 当把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，使用Object.defineProperty把这些属性全部转为 getter/setter（数据劫持/数据映射）。在属性被访问和修改时通知变化。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。Object.defi
2020-12-11 19:58:35
140
原创 Vue前端开发学习之——Vue常见指令(1)
Vue指令问：什么是指令?指令的本质就是标签中的vue自定义属性。指令格式以“v-”开始，例如：v-cloak,v-text,v-html等[注意]：v-html尽量少用甚至不用，因为可能引发XSS攻击。问：指令有什么作用?当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。(简化操作)常用指令1. v-cloak作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果注意：需要与css规则一起使用
2020-12-11 19:57:44
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人