- 博客(36)
- 收藏
- 关注
RSS订阅原创 Vue3_vite
1.Vue3中的一个新的配置项,值为一个函数2.可以将组件中所用到的数据,方法等配置在setup中.3.setup函数的两种返回值3.1若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用.3.2若返回一个渲染函数,则可以自定义渲染内容.注意:Vue2.0配置(data,methos,computed,...)中可以访问到setup中的属性,方法.但在setup中不能访问(data,methos,computed,...).如果有重名,setup优先。
2023-09-19 01:08:47
350
原创 Redux
Redux（1）Web 应用是一个状态机，视图与状态是一一对应的。（2）所有的状态，保存在一个对象里面。基本概念和APIStoreStore 就是保存数据的地方，可以把它看成一个容器。整个应用只能有一个 Store(全局唯一)。Redux提供createStore这个函数，用来生成 Store。createStore 函数接收另一个函数作为参数,返回新生成的Store对象import { createStore } from 'redux';const store = create
2021-08-09 00:55:56
167
原创 函数化组件Hook&组件跨层级通信Context
HookuseStateuseState(initialState)，接收初始状态，返回一个状态变量和其更新函数.在更新函数中传入新的值可以变更状态的值.
2021-01-27 01:14:07
414
原创 React路由基础
React路由现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件路由的基本使用使用步骤安装： yarn add react-router-dom如果没有安装yarn
2020-08-12 11:02:24
168
原创 React原理&setState()
setState()说明更新数据setState()更新数据是异步的注意：使用该语法，后面的setState不要依赖前面setState的值多次调用setState，只会触发一次render推荐语法推荐：使用 setState((state,props) => {}) 语法参数state： 表示最新的state参数props： 表示最新的props第二个参数场景：在状态更新(页面完成重新渲染)后立即执行某个操作语法：setState(update[,callback]
2020-08-11 18:13:55
201
原创 React组件的生命周期
组件生命周期意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数构造函数的作用：为开发人员在不同阶段操作组件提供了实际方法生命周期阶段创建时（挂载阶段）执行时机：组件创建时（页面加载时）执行顺序更新时执行时机：setState()、 forceUpdate()、 组件接收到新的props说明：以上三者
2020-08-09 23:28:26
231
原创 组件复用&render-props模式&高阶组件
组件复用思考：如果两个组件中的部分功能相似或相同，该如何处理？处理方式：复用相似的功能复用什么？state操作state的方法两种方式：render props模式高阶组件（HOC）注意： 这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式render-props模式思路：将要复用的state和操作state的方法封装到一个组件中如何拿到该组件中复用的state在使用组件时，添加一个值为函数的prop，通过函数参数来获取如
2020-08-09 23:25:23
451
原创 React组件化&&React组件通讯&&Props深入&&refs&&React.memo
组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯组件的props基本使用组件是封闭的，要接受外部数据应该通过props来实现props的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过 参数 props接收数据，类组件通过 t
2020-08-07 15:55:08
358
原创 React的基本使用&JSX的基本使用&React组件&事件处理State&setState&事件绑定this指向
React的基本使用React的安装安装命令:npm i react react-domreact包是核心,提供创建元素,组件等功能react-dom 提供DOM相关功能React的使用1.引入react和react-dom的两个js文件<script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/rea
2020-08-05 18:37:58
1100
1
原创 html5本地存储
早期Web中使用cookies在客户端保存用户名,id 等简单的信息,但是使用cookies存储永久数据存在以下问题:cookies的大小限制在4KB,不适合大量数据存储浏览器还限制站点可以在用户计算机上存储的cookies的数量cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽HTML5很好的提供了本地存储的功能,以键值对存储的解决方案,支持容量至少为4M,不用安装任何插...
2019-12-02 20:45:33
350
原创 移动web开发布局
流式布局（百分比布局）流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。flex布局flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 f...
2019-11-26 20:16:05
304
原创 DOM&&BOM&&移动端事件&&jQuery
DOM文档对象模型（Document Object Model，简称DOM)DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。DOM树DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。文档：一个页面就是一个文档，DOM中使用document表示节点：网页中的所有内容，在文档树中都是节点（...
2019-11-14 23:15:19
432
原创 微信小程序
微信开放者平台和微信公众号平台区别开放平台：是微信对外开放API接口的平台开放的API接口，供第三方网站和App调用后端程序员是开放平台开发的主力军公众平台：是基于微信公众号，为微信用户提供服务的平台所有公众号，都属于微信内开发前端程序员是公众平台开发的主力军app 与 小程序之间的区别开发原理不同App：基于手机操作系统提供的API进行开发；小程序：基于微信提供...
2019-11-12 22:59:08
1893
原创 HTML&&CSS
属性操作$().prop 操作的是固有属性$().prop(‘属性名’,值)如果传递一个参数，获取对应属性的值，如果传递两个参数，设置对应属性的值文本设置表单元素1.$().val() 如果不带参数表示获取，传入参数表示设置调用表单元素的value；...
2019-11-10 21:56:44
611
原创 Vuex模块化
Vuex插件Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。使用 Vuex 统一管理状态的好处① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护② 能够高效地实现组件之间的数据共享，提高开发效率③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；vu...
2019-11-04 21:27:26
183
1
原创 Vue项目优化&添加进度条效果&修改webpack默认配置&加载外部CDN&定制首页内容&路由懒加载
添加进度条1.安装nprogress----npm install nprogress2.导入进度条插件//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'3.在axios拦截器中开启关闭//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息axi...
2019-11-03 23:31:01
2436
原创 前端工程化
模块化概述传统开发模式的主要问题① 命名冲突② 文件依赖 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护浏览器端模块化规范AMDRequire.js (http://www.requirejs.cn/)CMDSea.js ...
2019-10-22 22:40:06
358
原创 Vue路由
路由路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。后端路由概念：根据不同的用户 URL 请求，返回不同的内容本质：URL 请求地址与服务器资源之间的对应关系前端路由概念：根据不同的用户事件，显示不同的页面内容本质：用户事件与事件处理函数之间的对...
2019-10-20 22:33:41
231
原创 javascript高级
面向对象对象----是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）面向对象---- 把具体事务分解成一个个对象,然后由对象之间分工合作.易维护、易复用、易扩展，由于面向对象有 封装、继承、多态性的特性，可以设计出低 耦合的系统，使系统 更加灵活、更加易于维 护,但是性...
2019-10-20 19:41:24
232
原创 Vue前后端交互Promise&axios
PromisePromise解决了异步深层嵌套的问题(回调地狱)//1.使用new构建一个Promise对象,Promise构造函数接受一个函数参数,并且传入两个参数,resolove(异步操作执行成功后的回调函数),reject(异步操作执行失败后的回调函数) var p = new Promise(function (resolve, reject) { ...
2019-10-19 23:49:30
519
原创 javascript基础
数据类型简单数据类型number:数值型.既可以保存整数，也可以保存小数* Infinity :代表无穷大，大于任何数值* -Infinity:代表无穷小，小于任何数值.* Nan:not a number ,代表一个非数值.isNan,用来判断一个变量是否为非数值类型,返回true 或false. isNan(变量名)string:字符串.* 转义符:\...
2019-10-16 19:45:15
338
原创 Vue-resource实现get,post,jsonp请求
Vue-resourceVue-resource依赖于Vue,在引入时要先引入Vue文件,引入Vue-resource会在Vue实例中加一个属性this.$http.全局配置数据接口的根域名Vue.http.options.root = '/root';私有配置数据接口的根域名new Vue({ http: { root: '/root' }})全局配置emu...
2019-10-12 17:43:41
145
原创 Vue过滤器&自定义按键修改符&自定义指令&过渡&动画&钩子函数
过滤器自定义私有过滤器可以在 new Vue({filters：{}})中的filters中注册一个私有过滤器 定义格式： new Vue({ el:'#app', filters:{ '过滤器名称':function(管道符号|左边参数的值,参数1,参数2,....) { return 对管道符号|左边参数的值做处理...
2019-10-11 23:04:10
372
原创 Vue基础
安装使用直接用 < script > 引入直接下载并用 < script> 标签引入，Vue 会被注册为一个全局变量；在vue官网直接下载到本地，在项目中使用script标签引入。创建Vue示例对象当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。//...
2019-10-07 22:18:34
251
原创 其他一些常用的方法&一些bug的解决方法
confirm(),确认弹出框；参数是字符串，弹出框的提示信息。返回值：返回一个boolean类型的值，点击确定返回true，点击取消返回false。
2019-09-29 09:38:50
123
原创 Jquery中封装的ajax方法
$.ajax()的基本使用.ajax({ //请求方式 type: 'post', //请求地址 url: '/base', //请求成功的处理函数 success: function(response) { consol...
2019-09-23 21:52:02
215
原创 浏览器模板引擎使用：art-template
1.下载art-template模板引擎库文件:https://aui.github.io/art-template/zh-cn/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...
2019-09-21 22:32:43
411
原创 Ajax使用 & FormData对象的使用&同源概念
Ajax使用步骤 //1.创建Ajax对象 let xhr = new XMLHttpRequest(); //2.调用open方法（请求方式，请求地址） xhr.open('get', 'http://localhost:3000/first'); //3.调用send方法，发送请求 xhr.send();...
2019-09-20 01:06:52
421
1
原创 express框架使用
Express框架简介提供了方便简洁的路由定义方式对获取HTTP请求参数进行了简化处理对模板引擎支持程度高，方便渲染动态HTML页面提供了中间件机制，有效控制HTTP请求拥有大量第三方中间件对功能拓展原生Nodejs与Express框架对比之路由功能原生Nodejs与Express框架对比之参数获取Express初体验（★★★）下载Express第三方模块npm i...
2019-09-11 01:00:26
331
原创 http协议&如何获取请求参数&异步函数
服务器端基础概念网站的组成网站应用程序主要分为两大部分：客户端和服务器端。**客户端：**在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。**服务器端：**在服务器中运行的部分，负责存储数据和处理应用逻辑。Node网站服务器能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。IP地址互联网...
2019-09-10 15:34:33
821
原创 Node.js的模板引擎（art-template）
下载npm install art-template//导入模板引擎,返回的是一个方法const template = require('art-template');//返回的是拼接好的字符串const html = template('模板路径'，插入模板中的数据（对象类型）);模板语法标准语法：{{数据}}<span>{{name}}</span&g...
2019-09-10 01:06:02
432
原创 node基本知识
Node是什么（★★★）Node是一个基于Chrome V8引擎的JavaScript代码运行环境运行环境浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境Node.js是什么（★★★）Node.js是运行在代码环境之上的语言JavaScri...
2019-09-09 15:26:53
376
原创 Node.js的系统模块&&第三方模块
什么是系统模块Node运行环境提供的**API**. 因为这些**API**都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块系统模块fs 文件操作(f：file 文件 ，s：system 系统，文件操作系统 )获取系统模块fs1.获取系统fs模块const fs = require('fs');2.通过模块内部的readFile读取文件...
2019-09-09 15:15:39
555
原创 Node.js的mongodb数据库
MongoDB数据库MongoDB数据库安装Node.js通常使用MongoDB作为其数据库，具有高性能，易使用，存储数据方便等特点，完全使用JavaScript语法即可操作。下载地址：https://www.mongodb.com/download-center/communityMongoDB可视化软件：MongoDB CompassMongoDB可视化操作软件，使用图形界面操...
2019-09-09 13:28:17
276
原创 HTML5&&CSS3&&2D转换&&动画&&3D转换
day01 - 移动web开发_H5C3HTML5学习目标： 了解 H5 新变化 掌握 H5 新增语义化标签 掌握 H5 新增多媒体标签 掌握 H5 新增 input 表单、表单属性1.1. 语义化标签 了解使用语义化标签的好处是增强了代码的可阅读性，也方便了网站的seo（Search Engine Optimization，搜索引擎优化）。header 头部标签...
2019-08-29 09:49:33
3395
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人