基础学习
文章平均质量分 74
从小白开始的基础学习流程
鲸渔要加油
这里鲸渔
展开
-
redux
Redux三大特性,单一数据源,State只读,纯函数执行修改原创 2021-11-11 14:19:15 · 441 阅读 · 0 评论 -
React 学习 Day 01
文章目录React 学习一、Reacte二、JSX三、显示数据调用函数四、虚拟 DOM 和 diff 算法五、组件 & propsReact 学习一、Reacte什么是 react :用于构建用户界面的js库( V => mv* )创建元素对像 :const 元素对象名 = React.createElement( 待创建的标签, 待创建的标签属性对象奥/null, 子内容)二、JSX使用 createElement 创建 react 对象非常的麻烦,解决方法就是 JSXJSX原创 2021-09-02 14:52:34 · 300 阅读 · 0 评论 -
Vuex 的使用
文章目录vuex 是什么?一、 state 的渲染二、 mutations三、 actions四、 getters五、 模块化 modules模块化中的命名空间vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式vuex 是采用 集中式 管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题state 共享数据状态mutations 所有数据的修改,但只能执行同步代码actions 执行异步的代码,然后将数据提交给 mutationsimport Vu原创 2021-07-19 21:46:41 · 409 阅读 · 2 评论 -
Vue 接口 promise + fetch + axios + async 和 await
文章目录一、promise1. 异步2. Promise一、promise1. 异步JS 是但线程,一次只能执行一个任务,任务执行完后才能执行下一个,它会「阻塞」其他任务,这个任务可称为主线程JS中常见的异步调用① 定时任务② Ajax③事件函数异步模式可以一起执行多个任务,但是结果顺序不确定,结果依赖于请求的这个程序的顺序如许要规定结果打印的顺序就需要函数嵌套,但是函数嵌套会形成回调地狱,于是就需要用到 promise2. PromisePromise 是异步编原创 2021-06-05 20:54:26 · 3767 阅读 · 34 评论 -
Vue 组件 + 组件之间传值 + 组件插槽
文章目录一、组件注册1. 全局注册一、组件注册组件就是把各自独立的积木拼成一个整体进行数据交互1. 全局注册组件注意事项全局组件 注册后,任何 vue实例 都可以用组件参数的data值必须是函数同时这个函数要求返回一个对象组件模板必须是单个根元素组件模板的内容可以是模板字符串 Vue.component('组件名称', { data: function () {return{}}, // data 在这里是函数 template: '模板' })就是相当于封原创 2021-06-05 19:56:28 · 599 阅读 · 0 评论 -
数组变异方法、替换数组、动态数组响应式数据
数组变异方法原创 2021-06-05 19:54:19 · 645 阅读 · 0 评论 -
表单修饰符、自定义指令、计算属性、侦听器、过滤器、生命周期
文章目录Vue 的常用特性一、表单基本操作二、自定义指令表单操作自定义指令计算属性过滤器倾听器声明周期Vue 的常用特性一、表单基本操作通过v-model获取单选框中的值获取复选框中的值复选框 checkbox 这种的组合时 data 中的 值 我们要定义成数组 否则无法实现多选获取下拉框和文本框中的值表单修饰符.number 转换为数值注意点:当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值所以属性值将实时更新成相同的字符串。即使后面输入数字,原创 2021-06-05 19:52:51 · 298 阅读 · 0 评论 -
Vue 数据,属性,样式,绑定 + 分支循环
学习目标◆ 能够说出 Vue 的基本用法◆ 能够说出 Vue 的模板语法◆ 能够说出 Vue 的常用属性◆ 能够基于 Vue 实现需求效果文章目录学习目标一、Vue二、指令v-cloak 解决闪烁1. 数据绑定指令v-textv-htmlv-prev-once2. 双向数据绑定v-modelmvvmv-onv-on 事件函数中传入参数事件修饰符一、VueVue 是一套用于 构建用户界面的渐进式框架声明式渲染 —— 组件系统 —— 客户端系统 —— 集中式状态管理 —— 项目构建官网原创 2021-06-05 19:51:28 · 522 阅读 · 0 评论 -
数据库的基本概念
额外原创 2021-06-05 19:43:53 · 365 阅读 · 0 评论 -
路由 + Express 路由
1. 学习目标◆ 能够熟练 express 路由的使用◆ 掌握中间件的使用方式◆ 能够说出中间件分为哪几类◆ 了解如何自定义中间件◆ 能够基于 exprss 写接口◆ 能够说出解决跨域问题的方法 cors◆ 掌握如何实现 JSONP 接口文章目录1. 学习目标一、Express 路由1. 路由的概念2. Express 中的路由3. 路由的匹配过程4. Express 路由最简单的用法5. 模块化路由6. 注册路由模块7. 为路由模块添加前缀二、中间件1. 中间件的概念2.原创 2021-06-05 19:20:53 · 588 阅读 · 0 评论 -
Express 的基本使用 + nodemon
学习目标◆ 能够使用 express.static() 快速托管静态资源◆ 能够使用 express 路由精简项目结构◆ 能够使用常见的 express 中间件◆ 能够使用 express 创建 API 接口◆ 能够在 express 中启用 cors 跨域资源共享文章目录学习目标一、初识 express1. Express 的基本使用2. 监听 GET 和 POST 请求,并影响客户端一、初识 expressexpress 简介官方给出的概念:Express 是基于 Nod原创 2021-06-05 16:49:19 · 1461 阅读 · 0 评论 -
npm
文章目录一、包二、npm 初体验1. 装包2. 格式化时间的做法对比3. node_modules 和 pageage-lock.json4. 安装指定版本的包5. 包的语义化版本一、包Node.js 中的第三方模块又叫做包包的来源Node.js 中的包是由第三方个人或团队开发出来的,都是免费且开源的,不需要付费即可免费下载使用包是基于内置模块封装出来的,提供了更高级、更方便的 API,极大的提高了开发效率搜索包的网站: npm下载包的网站: https://registry.npmjs.or原创 2021-05-20 21:26:42 · 749 阅读 · 0 评论 -
Node 中的模块化 + module对象 + exports对象
文章目录原创 2021-05-19 21:54:41 · 411 阅读 · 0 评论 -
http 模块 + 创建 web 服务器
学习目标◆ 能够使用 http 模块写一个基本的 web 服务器◆ 能够说出模块化的好处◆ 能够知道 CommonJS 规定了哪些内容◆ 能够说出 Node.js 中模块的三大分类各自是什么◆ 能够使用 npm 管理包文章目录学习目标一、服务器相关的概念二、http 模块三、创建 web 服务器1. 实现步骤和核心代码2. req 请求对象 与 res 响应对象3. 解决中文乱码问题四、根据不同的 url 响应不同的内容一、服务器相关的概念ip 地址IP 地址 就是互联网上每台计原创 2021-05-19 16:13:46 · 1292 阅读 · 4 评论 -
Node 读取 + 写入 + 路径问题
学习目标◆ 能够知道什么是 Node.js◆ 能够知道 Node.js 可以做什么◆ 能够说出 Node.js 中的 JavaScript 的组成部分◆ 能够使用 fs 模块读写操作文件◆ 能够使用 path 模块处理路径◆ 能够使用 http 模块写一个基本的 web 服务器文章目录学习目标一、Node二、fs 文件系统1. fs 文件系统模块2. 读取 fs.readFile()3. 写入 fs.writeFile()三、fs 路径问题使用 __dirname 解决路径拼接问题原创 2021-05-18 17:06:47 · 1125 阅读 · 0 评论 -
同源跨域 + JSONP + 防抖节流
目标能够知道什么是同源策略和跨域能够知道什么是 JSONP能够说出 JSONP 的实现原理能够知道防抖和节流的概念文章目录目标一、同源策略二、跨域三、JSONPJSONP的实现原理自己实现一个简单的JSONPJSONP 的缺点jQuery 中的 JSONP自定义参数及回调函数名称jQuery 中 JSONP 的实现过程一、同源策略什么是同源如果两个页面的协议,域名和端口都相同,则两个页面具有 相同的源**例如:**相对于 http://www.test.com/index.html 页原创 2021-05-18 16:46:39 · 437 阅读 · 10 评论 -
XMLHttpRequest + JSON + 文件上传 + axios
目标能够知道如何使用 XMLHttpRequest 发起 Ajax 请求能够知道如何封装自己的 Ajax 函数能够使用 XMLHttpRequest Level2 中提供的新特性能够知道 jQuery 中如何实现文件上传与loading效果能够知道如何使用 axios 发起 Ajax 请求文章目录目标一、XMLHttpRequest1. 使用 `xhr` 发起GET请求2. 了解 `xhr` 对象的 `readyState` 属性3. 查询字符串4. URL编码与解码如何对URL进行编码与解原创 2021-05-13 20:37:55 · 1078 阅读 · 0 评论 -
Form表单和模板引擎
文章目录一、Form表单和模板引擎1. Form表单2. <`form`> 标签的属性`action` 向哪发送表单数据`target` 在哪打开`method` 什么方式提交`enctype` 编码3. 表单的同步提交及缺点4. 通过 Ajax 提交表单数据监听表单提交事件阻止表单默认提交行为`serialize()` 函数快速获取表单数据一、Form表单和模板引擎1. Form表单表单标签表单域:包含了文本框,密码框,隐藏域,都行文本框,复选框,单选框,下拉选择框和文件上传框等等原创 2021-05-12 16:42:48 · 445 阅读 · 0 评论 -
Ajax + $ajax
文章目录一、客户端与服务器二、网页中如何请求数据三、资源的请求方式四、Ajax五、jQuery 中的 Ajax5.1 `$.get()` 函数介绍5.2 `post()` 函数介绍5.3 `ajax()` 函数介绍六、接口七、接口文档一、客户端与服务器1. URL地址的概念&组成URL的概念URL(全称是 UniformResourceLocator) 中文叫 统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资原创 2021-05-10 21:43:45 · 275 阅读 · 0 评论 -
ES6新增语法 + 内置对象扩展 + 箭头函数
文章目录ES6语法ES6语法ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范原创 2021-05-09 22:41:34 · 543 阅读 · 0 评论 -
正则表达式
文章目录正则表达式一、正则表达式的创建二、测试正则表达式三、元字符(特殊字符)1. 边界符2. 字符类正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式在 JavaScript 中,正则表达式也是对象一、正则表达式的创建通过构造函数创建var regexp = new RegExp(/123/)利用字面量创建 正则表达式var rg = /123/二、测试正则表达式.test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返原创 2021-05-09 10:47:43 · 911 阅读 · 0 评论 -
函数的定义和调用 + 改变this指向方法 + 闭包 + 递归
文章目录一、函数的定义和调用1. 函数的定义2. 函数的调用二、三、四、五、一、函数的定义和调用1. 函数的定义函数声明方式 function 关键字 (命名函数)function fn(){}函数表达式(匿名函数)var fn = function(){}new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2原创 2021-05-07 16:54:04 · 629 阅读 · 0 评论 -
JS高级 构造函数和原型 + 继承 + ES5新增方法
一、怎么用css画一个三角形 ?考查的是css , 用自己的语言表述/* 等腰三角形 */.box { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent transparent #0099CC transparent;}/* 直角三角形 */.box1 { width: 0; height: 0; b原创 2021-05-06 18:17:04 · 180 阅读 · 0 评论 -
JS高级 面向对象 类 + 构造函数
一、面向对象面向对象优点易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统更加灵活、更加易于维护缺点性能比面向过程低面向过程优点性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发,性能是最重要的因素。缺点不易维护、不易复用、不易扩展二、类和对象1. 对象对象是由属性和方法组成的:是一个无序键值对的集合,指的是一个具体的事物2. 类在原创 2021-04-28 14:13:37 · 347 阅读 · 0 评论 -
数据可视化 Echarts + 边框图片 + ES6拼接字符串
一、Echarts简单的使用步骤官方教程: 五分钟上手下载: echarts引入echarts dist/echarts.min.js准备一个具备大小的DOM容器<div id="main" style="width: 600px;height:400px;"></div>初始化echarts实例对象var myChart = echarts.init(document.getElementById('main'));指定配置项和数据(option)原创 2021-04-25 09:42:36 · 469 阅读 · 0 评论 -
jQuery 事件
一、jQuery 事件注册事件处理1.1 on() 绑定事件可以同时绑定多个事件// 绑定多个事件$('div').on({ mouseover: function(){}, mouseout: function(){}, click: function(){}});// 事件处理程序相同,这个基本用不上$('div').on('mouseover mouseout', function() { alert('Hello');});可以事件委派$('ul').on(原创 2021-04-20 21:30:59 · 116 阅读 · 0 评论 -
jQuery 的基本操作 属性 文本 元素 尺寸 位置
一、jQuery 属性操作jQuery 常用属性操作有三种:prop() / attr() / data()获取属性: 传入一个参数,属性名设置属性: 传入两个参数,属性名,属性值元素固有属性值 prop()注意: prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等元素自定义属性值 attr() 可以操作所有自定义属性数据缓存 data() 专门操作 data- 开头的自定义属性注意: 还可以读取 HTML5 自定义属性 d原创 2021-04-20 16:38:19 · 115 阅读 · 0 评论 -
jQuery 选择器 + 样式操作 + 动画
一、jQuery的概念javascript库:是用原生js封装好的属性和方法的特定的一个集合jQuery官网: https://jquery.com入口函数: $(function () {}); DOM加载完成二、DOM与jQuery对象用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象jQuery 对象本质是: 利用 $ 对 DOM 对象包装后产生的对象(伪数组形式存储)DOM 转换为 jQuery :$(DOM方式获取的对象)jQu原创 2021-04-19 20:36:58 · 219 阅读 · 0 评论 -
Git的使用
一、Git用户信息配置除非换了环境一般只用配置一次配置用户名git config --global user.name "用户名"配置邮箱git config --global user.email "邮箱"查看全局配置git config --global -l二、Git 的三个区域工作区暂存区仓库Git 文件的四种状态Untracked 未跟踪Unmodified 未修改Modified 已修改Staged 已暂存三、Git仓库的使用3.1 初始化原创 2021-04-18 21:41:48 · 123 阅读 · 0 评论 -
Web API 移动端的触摸事件 + 本地存储
一、触屏事件touchstart 触摸一个DOM元素时触发touchmove 手指在一个DOM元素上滑动时触发touchend 手指离开一个DOM元素时触发二、触摸事件对象touches 触摸屏幕所有的手指列表changedTouches 手指的变化,无—有,有—无targetTouches 触摸元素的所有手指列表三、classList 属性div.classList.add('box'); 添加类div.classList.remove('box'); 移除类div.classLis原创 2021-04-18 20:49:49 · 137 阅读 · 0 评论 -
Web API 动画
一、动画原理就是用 setInterval() 定时器来不断移动盒子获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left1.1 封装动画得时候记得要清除动画,不然会叠加function animate(obj, target) { // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.time原创 2021-04-18 19:58:54 · 210 阅读 · 0 评论 -
三大系列 ofset client scroll
一、offset 元素偏移获得元素到带有定位的父元素的距离获得元素自身大小返回的数值都不带单位element.offsetParent : 返回该元素带有定位的父元素,没有就返回bodyelement.offsetTop : 返回元素相对带有定位父元素上方的偏移量element.offsetLeft : 返回元素相对带有定位父元素左边的偏移量element.offsetWidth : 返回元素宽度,padding+边框+内容element.offsetHeight : 返回元素高度,pa原创 2021-04-18 19:46:21 · 79 阅读 · 0 评论 -
BOM
一、BOMBOM是浏览器对象模型,BOM包含DOM1.1 windowwindow对象是浏览器的顶级对象是一个全局对象,全局作用域的变量函数都是window对象的属性和方法二、窗口加载事件第一种写在这个里面的代码会等整个页面加载完了再执行,就可以把js放在页面的任何地方,还可以放外部js文件window.onload = function() {}只能写一次,以最后一个为准window.addEventListener('load', function() {});第二种这个会原创 2021-04-10 21:04:03 · 66 阅读 · 0 评论 -
监听事件 + 鼠标事件 + 键盘事件
一、注册事件传统用on开头的唯一性:同一个元素同一个事件只能设置一个处理函数btn.onclick = function() {}监听注册方式.addEventListener('click', function() {}, )二、删除事件(解绑事件)传统<div>鲸渔</div><script> var div = document.querySelector('div'); div.onclick = function原创 2021-04-08 21:19:00 · 576 阅读 · 0 评论 -
节点操作 + Time
一、节点操作1.nodeType 节点类型, 2.nodeName 节点名称 3.nodeValue 节点值元素节点nodeType为1属性节点nodeType为2文本节点nodeType为3(包含文字,空格,换行)1.1 父子兄parentNode 得到最近的父级节点children 得到所有的子元素节点ul.children[0] 得到第一个子元素节点ul.children[ul.children.length - 1] 得到最后一个子与元素节点childNodes 得到所有的子节点原创 2021-04-08 08:22:07 · 171 阅读 · 0 评论 -
属性的获取,设置和移除 + Time
一、排他思想用for循环去除其他所有人的样式二、获取,设置 属性值,移除属性获取属性值element.属性 获取内置属性值(元素本身自带属性)element.getAttribute('属性') 获取自定义属性值<div id="box"></div><script> var div = document.querySelector('#box'); console.log(div.id); console.log(div.getAttri原创 2021-04-08 08:21:22 · 79 阅读 · 0 评论 -
Web API 事件基础 + Time
Web API原创 2021-04-07 14:47:23 · 92 阅读 · 0 评论 -
简单数据类型和复杂数据类型
简单数据类型简单类型(基本数据类型、值类型):在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,nullnull 是 Object,是个空对象如果有个变量打算储存为对象,没想好放什么,就给null复杂数据类型复杂数据类型(引用类型):在存储时变量中存储的仅仅是地址(引用)通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等堆栈...原创 2021-04-01 21:07:26 · 285 阅读 · 0 评论 -
JS基础 6 内置对象 + Time
一、内置对象内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)二、查文档MDN: https://developer.mozilla.org/zh-CN/三、Math对象...原创 2021-03-31 21:57:28 · 472 阅读 · 0 评论 -
JS基础 5 对象
一、对象什么是对象在 JavaScript 中,对象是一组无序的相关 属性 和 方法 的集合,所有的事物都是对象,例如字符串、数值、数组、函数等二、创建对象的三种方式var star = { name : '鲸渔', age : 18, sex : '男', sayHello : function(){ alert('hello'); }};...原创 2021-03-25 20:49:08 · 82 阅读 · 0 评论