![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网课笔记
文章平均质量分 91
小北@爱学习
爱学习的超级无敌大可爱
展开
-
初识React
初识React如何在react中使用表单元素受控表单表单元素的值全部由react来进行管理,此时表单元素中的值都放在state中,所有表单元素里的值也需要从state当中获取到与数据绑定同步将state中的状态与表单的value值进行绑定 value={this.state.xxxx}如何更新状态值 οnchange={方法} ev.target.value绑定ev.target.name===[prop]: this.setState({})遇到细节问题readOnly 如果希原创 2021-07-17 16:24:11 · 152 阅读 · 2 评论 -
VUE(三)组件
Vue.js组件组件用于封装页面的部分功能,将功能的结构、样式、逻辑代码封装为整体,提高代码的复用性和可维护性,更好专注于业务逻辑组件注册全局注册全局注册的组件在注册后可以用于任意实例或组件中,必须注册在根Vue实例创建之前Vue.component('my-component',{ template:'<div>这是全局组件</div>' })组件基础本质上组件是可复用的Vue实例,可与new Vue接受相同的选项,如data、methods以及生命周期钩子原创 2021-03-20 17:31:31 · 113 阅读 · 0 评论 -
VUE(四)路由Router
Vue RouterVue Router是Vue.js的官方插件,用来快速实现单页应用单页应用SPA(Single Page Application)单页面应用程序,简称单页应用。网站的“所有”功能都在单个页面中进行呈现,一般是表现效果相似,页面并没有进行切换优点:前后端分离开发,提高开发效率业务场景切换时,局部更新结构用户体验好,更好接近本地应用缺点:不利于SEO初次首屏加载速度较慢页面复杂度较高前端路由URL与内容间的映射关系Hash方式通过hashch原创 2021-03-20 17:30:39 · 157 阅读 · 0 评论 -
VUE(一)初识VUE.JS
初识VUE.JSDOM操作频繁,代码繁杂;DOM操作与逻辑代码混合,可维护性差;不同功能区域书写在一起,可维护性低;模块依赖关系复杂Vue.js简介遵循vue.js规则来使用这个工具提高我们的开发数据驱动视图**单向数据绑定:**数据变化会自动更新到对应元素视图中,无需手动操作DOM**双向数据绑定:**自动将元素输入内容更新给数据,实现数据和元素内容的双向绑定(可输入元素)**MVVM:**软件开发思想model—代表数据view—试图模板viewmodel—业务逻辑处理代码基于原创 2021-03-13 17:39:28 · 181 阅读 · 0 评论 -
VUE(二)事件与表单处理
事件与表单处理事件处理v-on指令可以进行事件的绑定<button v-on:click="content='按钮1更新后的内容'">按钮1</button><button @click="content='按钮2更新后的内容'">按钮2</button>//简写方式<button @click="fn2(200,$event)">按钮4</button>//通过函数进行事件的添加表单绑定v-model指令用于给inpu原创 2021-03-13 17:38:26 · 159 阅读 · 0 评论 -
模块化开发
模块化开发模块化发展第一阶段基于文件的划分模块方式污染全局作用域命名冲突问题无法管理模块依赖关系第二阶段命名空间方式,每个模块只暴露一个全局对象, 所以模块成员都挂载在这个对象中没有私有空间,在外部仍然会被访问到第三阶段立即执行函数,闭包方式,实现了私有成员的概念模块规范化的出现模块化标准+模块加载器Commonjs模块,一个文件就是一个模块,每个模块都有单独作用域,通过module.exports导出成员,require函数中载入模块AMD模块化,requ原创 2021-03-08 15:04:24 · 183 阅读 · 1 评论 -
Node—前端工程化概述
文章目录前端工程化概述简述Node.js基础Node.jsNode.js APIsNode.js使用全局对象全局函数模块内置模块consoleprocesspathfs—file systemfs实践—文件的复制和压缩文件流http自定义模块简介加载逻辑第三方模块npm概述安装--save和--save-dev脚手架工具Yeoman前端工程化概述简述什么是工程?工程化:在完成一个项目的时候所用到的技术和工具,用来提高前端开发的效率前端工程化的萌芽:内容:项目上线的时候,需要进行压缩代码,更原创 2021-03-02 19:52:27 · 430 阅读 · 0 评论 -
Node—自动化构建
文章目录自动化构建构建自动化构建npm scripts样式文件脚本文件ESLintStyleLintGulp基础对比npm script使用Gulp组合任务文件操作构建文件样式文件脚本文件HTML文件图片文件清除文件服务发布BootstrapGulp和yeoman自动化构建构建源代码——>生产代码一些代码需要编译 (CSS、JS),保证浏览器的兼容性;有些代码需要压缩;有些代码需要统一代码风格自动化构建将手动构建任务,通过命令自动执行的过程,把所有的任务按逻辑排列在一起,一条命令进行执行原创 2021-03-02 19:51:55 · 329 阅读 · 0 评论 -
AJAX—基础
文章目录Ajax基础概述xhr对象open方法send方法响应状态同步和异步数据格式xmljsonjson-server使用方法原生Ajax应用GET方法POST方法响应数据渲染封装Ajax函数Ajax基础概述已知发送请求的方式:地址栏输入地址,回车刷新、特定元素的href属性、表单提交,一般来说都是通过浏览器操作的,这些方案无法通过代码方式实现对服务器端发送请求需求:对服务器发出请求并且能够接收服务端返回的响应,通过js直接发送网络请求,web的可能就会更多,实现的功能也就越多Google原创 2021-02-23 22:33:13 · 72 阅读 · 0 评论 -
AJAX—常用库
文章目录Ajax常用库jQuery中的ajax方法$.get()$.post()其他类型请求jQuery其他方法Axios介绍Axios API全局配置默认值参数拦截器快速请求get和postHTML5.0onload事件onprogress事件HTTP2.0response属性responsType属性跨域和模板引擎同源策略JSONP原理jQuery库中JSONPcors跨域模拟百度搜索案例模板引擎artTemplateartTemplate应用百度搜索案例留言板案例模板引擎artTemplateartT原创 2021-02-23 22:28:56 · 401 阅读 · 0 评论 -
jQuery(一)—基础
jQuery基础简介一个高效、精简并且功能丰富的JS工具库,主要对JS中选择元素的方法进行了大量的优化获取元素//之前学习没有兼容性问题方法var box = document.getElementById("box");var box = document.getElementsByTagName("div")[0];//jquery方法$(".box") $("#box")获取css样式并修改console.log($("#box").css("width")); /原创 2021-02-18 20:05:19 · 117 阅读 · 0 评论 -
jQuery(二)—排序和动画
jQuery排序和动画排序eq大排序jQuery中获得的对象,在内部会进行一个大的排序,将选中的对象从0开始排在一起eq()通过下标获取某个对象,下标是大的排序的下标 // 获取元素 var $ps = $("p"); //使用eq方法,下标均为被选择元素组成的重新下标值 $ps.eq(0).css("background-color", "pink"); $ps.eq(5).css("background-color", "pink"); // 通过其他方法获取元素 $("原创 2021-02-18 20:04:31 · 177 阅读 · 0 评论 -
jQuery(三)—节点操作和元素尺寸
jQuery节点操作和元素尺寸节点操作创建、追加元素$()直接传入想要创建的节点var $newli = $("<li>这是一个新的li标签</li>")追加元素1(给父元素内部追加) $ul.append($newli);//在父元素最后追加 $newli.prependTo($ul);//在父元素最前面追加 $newli.appendTo("ul");追加元素2(给兄弟元素追加),一般是多个标签存在给确定样式的某个元素的前或后面添加 $old.原创 2021-02-18 20:03:59 · 83 阅读 · 0 评论 -
JS高级—面向对象
文章目录面向对象概念对象面向对象面向过程实际区分面向对象和面过程创建对象构造函数new关键字的用途constructor属性instanceof属性静态成员和实例成员问题原型对象prototype原型对象更好解决方案使用建议原型链实例对象读写原型对象成员原型语法内置构造函数随机方块随机方块面向对象概念对象万物皆对象,单个事物的抽象对象是一个容器,封装了属性(property对象的状态)和方法(method对象的行为)面向对象面向对象编程(Object Oriented Programmi原创 2021-02-09 21:05:31 · 110 阅读 · 0 评论 -
JS高级—贪吃蛇游戏
文章目录贪吃蛇游戏——分析食物对象Food蛇对象Snake游戏对象Game化简自调用函数作用域贪吃蛇游戏——分析我们可以将整个游戏中的内容抽象成三个对象游戏对象Game蛇对象Snake食物对象Food食物对象Food创建Food的构造函数,并设置属性xywidthheightcolor通过原型设置方法render随机创建一个食物对象并输出到map上自调用函数进行封装,通过window暴露Food对象蛇对象Snake创建Snake的构造函数,并原创 2021-02-09 21:03:47 · 131 阅读 · 0 评论 -
JS高级—继承和函数进阶
文章目录继承和函数进阶继承对象之间的继承原型继承函数的call方法借用构造函数继承属性构造函数方法的继承组合继承函数进阶函数声明和函数表达式函数调用和thiscall、apply、bind方法函数的其他成员高阶函数闭包概念理解和应用问题继承和函数进阶继承对象之间的继承通过for…in实现对象间的拷贝//继承的函数 function extend(parent, child) { for (var k in parent) {原创 2021-02-09 21:02:00 · 151 阅读 · 0 评论 -
JS高级—正则表达式
文章目录正则表达式概述概念作用创建方法字符串方法正则方法字符字符集修饰符边界预定义类量词分组中文匹配正则表达式概述概念对字符串操作的一种逻辑公式用事先定义好的一些特殊字符、及这些特定字符的组合,组成一个”规律字符串“,用来表达对字符串的一种过滤逻辑作用给定的字符串是否符合正则表达式的过滤逻辑(匹配)通过正则表达式,从字符串中获取我们想要的特定部分(提取)强大的字符串替换能力(替换)创建方法使用正则表达式字面量创建(最为常用)var reg = /abc/;调用Re原创 2021-02-09 20:59:42 · 140 阅读 · 0 评论 -
JS高级—ES6新特性
文章目录ES6新特性概述ES2015概述变量声明let和块级作用域const(主用)数组解构对象解构模板字符串简介标签函数字符串扩展参数默认值剩余操作符展开操作符箭头函数简介this对象字面量Object.assign方法Object.is方法class类静态static类的继承extends其他方法SetMapSymbol数据类型for…of遍历ES2015其他内容ES2016概述ES6新特性概述ES2015概述解决原有语法上的一些问题或缺陷(const、let)对原有语法进行增强全新的对象原创 2021-02-09 20:57:14 · 970 阅读 · 0 评论 -
Web API—BOM
BOM概念BOM(Browser Object Model)浏览器对象模型,提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成。代表浏览器窗口的Window对象是顶层对象,其他对象都是该对象的子对象可以使用BOM进行处理的,刷新浏览器、后退、前进、在浏览器输入URL地址window对象window对象在调用属性和方法时,可以省略window不写特殊属性name,如果定义新的变量,只会在原来的name属性上进行赋值,并且只能是字符串类型top属性在window中原创 2021-02-02 12:16:16 · 185 阅读 · 0 评论 -
Web API—DOM(二)
文章目录DOM-Web APIDOM节点操作节点属性父子节点兄弟节点节点操作案例分析DOM事件操作addEventListenerattachEvent注册事件兼容写法解除事件DOM事件流事件流三阶段冒泡应用事件对象offset系列属性client系列属性scroll系列属性拖拽案例弹出层案例DOM-Web APIDOM节点操作节点属性 var box = document.getElementById("box"); // 元素节点 console.dir(box); //nodeNam原创 2021-02-02 12:11:07 · 76 阅读 · 0 评论 -
Web API—DOM(一)
文章目录DOM-Web APIAPI概念Web API概念DOMDOM操作—获取元素根据id获取根据标签名获取根据name属性获取根据class属性获取根据选择器获取标签内部内容属性DOM—添加事件事件监听常用事件监听方法非表单元素属性this指针案例分析表单元素属性案例分析自定义属性style样式属性案例分析DOM-Web APIAPI概念API(application programming interfance)应用程序编程接口,预先定义的函数,提供应用程序与开发人员得以访问一组例程的能力,而原创 2021-02-02 11:55:11 · 141 阅读 · 0 评论 -
JS语法回顾(四)
文章目录JS语法(四)对象概念对象字面量调用对象内部属性和方法更改对象内部属性和方法其他创建对象的方式对象遍历简单数据类型和复杂数据类型内置对象MDN使用方法Math对象简介常用Math成员数组对象通过构造函数来创建数组常用属性和方法清空数组字符串对象基本包装类型字符串特点字符串属性方法JS语法(四)对象概念**为什么要用对象?**数据存入数组中受下标限制又必须有固定的顺序,而对象可以自定义名称存储一系列无序的相关数据**什么式对象?**万物皆对象,对象式一个具体的事物,具有行为和特征。无序属性原创 2021-01-27 17:58:42 · 80 阅读 · 0 评论 -
JS语法回顾(三)
文章目录JS基础语法(三)数组概念获取数组长度数组的长度数组的遍历函数概念函数声明函数调用函数的返回值函数表达式函数的数据类型argument对象函数递归作用域作用域链和遮蔽效应预解析和声明提升IIFE自调用函数JS基础语法(三)数组概念将多个元素按一定顺序排列放到一个集合中, 这个集合我们称之为数组数组的字面量[],多个数据之间使用,分隔 // 创建一个数组 var arr = []; // 创建一个包含多个数据类型的数组,数据类型不限制 var arr2 =原创 2021-01-27 17:50:45 · 77 阅读 · 0 评论 -
JS语法回顾(二)
文章目录操作符算数运算符比较运算符逻辑运算符赋值运算符一元运算符运算符优先级流程控制语句表达式、语句if语句三元表达式switch语句for循环do while循环while循环break语句continue语句穷举思想累加器、累乘器操作符表达式的组成包含操作数和操作符,最后的表达式最后会的得到一个值然后去参与运算我们讨论的非特殊情况,工作中并不会遇到特殊的运算,但是面试可能会遇到算数运算符+、-、*、/、%、()运算顺序,先算乘除取余,再算加减,有括号先算括号里的非正常情况原创 2021-01-24 22:33:34 · 85 阅读 · 0 评论 -
基础回顾(十)| 响应式布局—阿里佰秀
文章目录响应式布局—阿里佰秀响应式开发原理Bootstarp框架简介布局容器栅格系统实例练习屏幕划分container宽度修改布局响应式布局—阿里佰秀响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的设备划分尺寸区间设置宽度列前缀超小屏幕(手机)<768px100%.col-xs-小屏设备(平板)>=768px ~ < 992px750px.col-sm-中等屏幕(桌面)>=9原创 2021-01-22 17:16:11 · 80 阅读 · 0 评论 -
基础回顾(九) | 苏宁项目Rem
文章目录Rem—苏宁项目Rem单位媒体查询简介语法规范Rem媒体实现动态变化媒体查询引入方式Less基础css弊端Less简介和安装Less基础Rem的适配方案适配目标?如何达到?实际开发?苏宁项目公共样式common.less文件制作新建index.less文件顶部结构轮播图部分flexible.js简介改进实现改进实现Rem—苏宁项目思考?页面布局文字能否随屏幕变化而变化?如何让屏幕发生变化是,宽高等比例变化?Rem单位是一个相对单位,类似于em,em是父元素字体的大小rem的基准是原创 2021-01-22 17:12:34 · 206 阅读 · 0 评论 -
基础回顾(七)| 流式布局_京东项目
报名拉勾教育“大前端就业集训营”课程已经1月之久了,就想来谈谈我的看法,关于自学,报班学习~在之前我一直觉得我不会报班的,一方面是因为费用比较高,另一方面我觉得通过我自己的学习可以让我掌握学习内容。我自己的情况是有自学前端课程快一年,在这个自学过程中,先是问同学、看各种前端学习路线来指定自己的学习计划,然后在哔哩哔哩上看课程,大概学到vue框架了,但是发现自己的基础特别不扎实,就属于有的没的都在学,学完之后也不知道实际上班怎么去使用、到底会不会用到这些……心里特别没底气,总觉得自己啥都不会(实际上是有点.原创 2021-01-03 21:27:51 · 176 阅读 · 0 评论 -
基础回顾(八)| Flex布局—携程网项目
Flex布局—携程网项目传统布局和flex布局传统布局兼容性好、布局繁琐局限性,不能在移动端很好的布局flex布局操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持比较差IE11低版本不支持选择方式如果是PC端页面布局,考虑传统布局模式如果是移动端或者不考虑兼容性问题的PC端,使用flex弹性布局布局原理flexible box弹性布局,用来为盒装模型提供最大的灵活性,任何一个容器都可以指定为flex布局当父盒子设置为flex布局以后,子元素的float、cl原创 2021-01-03 21:26:03 · 272 阅读 · 0 评论 -
基础回顾(六)| 移动端开发基础
移动端开发基础基础知识点浏览器现状PC端常见浏览器360、谷歌、火狐、QQ、百度、搜狗移动端常见浏览器UC、百度手机浏览器、360安全浏览器兼容移动端主流浏览器、处理webkit内核浏览器手机屏幕现状尺寸非常多,碎片化严重自动识别分辨率调试方法:谷歌浏览器的模拟手机调试视口浏览器显示页面内容的屏幕区域布局视口(layout viewport)将PC端尺寸的页面通过压缩显示在移动端窗口视觉视口(visual viewport)用户正在看到的网站的区域,通原创 2021-01-03 21:03:06 · 116 阅读 · 0 评论 -
基础回顾(五) | PC端静态网页应用开发
PC端静态网页应用开发学习完HTML、CSS内容,搭建一个完整的页面还需要对页面的整体布局有明确的认识才能很好掌握基础。开发流程1、需求分析 要对开发的产品进行定位(产品类型、功能、面向客户群)2、整体规划 确定网站中要展示的内容、层次、展示形式,给出对应内容文案3、界面设计 网站的各个页面进行设计,给出最终的设计图、颜色、数据信息4、前端程序设计将得到的设计图进行代码的编写,实现网页的界面功能5、前后端系统整合后端开发人员进行数据库设计,将程序功能与界原创 2020-12-20 13:23:29 · 556 阅读 · 0 评论 -
基础回顾(四)| 重构HTML5&CSS3
重构HTML5&CSS3H5简介H5万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言,用于替代H4与XHTML的新一代标准版本,所以叫做H5XHTML可扩展性超文本标记语言,增强了的HTML,适应应用的更多需求设计目的是为了在移动设备上支持多媒体,增加了语义特性,本地存储特性,设备兼容特性,连接特性,网络多媒体特性,三维、图形及特效特性、性能与集成特性、CSS3特性废弃了font、center…元素或者属性优势提高了可用性和改进用户的友好体验,更好原创 2020-12-11 16:42:18 · 218 阅读 · 0 评论 -
基础回顾(三)| CSS核心样式
【写在开头】基础回顾系列的内容总结主要来源于拉钩课程的大前端就业班,在之前一段自己有学过前端,但是存在的问题就是学的东西不系统,都是这边学一点,那里又学一点,等真正需要用的时候,就存在这个知识点有印象,但是不知道具体怎么使用,有什么注意的点。所以选择跟着拉钩的课程系统过一下知识点。在为自己投资的过程中,与其去犹豫衡量值不值得,不如动起来,这才是最终效果反馈的决定性因素。文章目录CSS核心样式字体粗细 font-weight样式风格 font-style行高 line-height字体综合 font文.原创 2020-12-11 16:41:42 · 219 阅读 · 0 评论 -
基础回顾(二)| CSS
CSS基础语法一、概述1、CSS概念层叠式样式表,一种用来表现HTML的文件样式的计算机语言层叠式:CSS中贯穿始终的加载特性,具有层叠性,继承性样式:如何显示HTML元素,文字文本,背景,盒模型,浮动,定位静态地修饰网页,并可以配合多种脚本动态的对网页各元素进行格式化实现了网页结构和样式的分离2、CSS规则选择器一条或多条样式属性书写位置内联式 写入style属性中<div style="width:100px;font-size:14px原创 2020-12-06 13:08:29 · 78 阅读 · 0 评论 -
基础回顾(一)| HTML
HTML基础前端开发介绍1、前端开发是什么?创建Web页面或app等前端页面呈现给用户核心 HTML、CSS、JS以及衍生技术框架应用场景PC、APP、小程序、游戏、服务端2、学习路线HTML 语法、语义、SEO基础CSS 语法、页面布局、媒体查询、CSS3CSS进阶 预处理器、框架、架构规范JS 语法数据结构 WebAPI ES6+ 模块化 Tyscript构建工具 npm框架 VUE React Angular持续学习 Node.js 服务器渲染3、互联网原理前原创 2020-12-05 16:47:57 · 160 阅读 · 0 评论