- 博客(33)
- 收藏
- 关注
RSS订阅原创 React 的 hooks 和 路由
一.React的hooks ( 函数组件 )1. 什么是 HooksReact 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有.Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性.如果在编写函数组件时需要向添加一些 state，以前的做法是必须将其它转化为 class。现在可以直接在现有的函数组件中使用 Hooks
2021-08-02 00:00:37
2044
原创 React 生命周期和API 使用
一.生命周期1.创建阶段创建时(挂载阶段)执行时机:组件创建时 (页面加载时)钩子函数触发时机作用constructor创建组件时,最先执行1.初始化state 2.为事件处理程序绑定thisrender每次组件渲染都会触发渲染UI(注意:不能调用setState)componentDidMount组件挂载后(DOM渲染完成)1.可以进行网络请求 2.DOM操作class Comp extends React.Component { c
2021-07-29 21:16:51
476
原创 React 组件创建方式和组件之间通信
一.React 组件的两种创建方式1.使用函数创建组件使用 JS 中的函数创建的组件叫做: 函数组件函数组件必须有返回值组件名称必须以大写字母开头,React 据此区分组件和普通的React 元素使用函数名作为组件标签名// 函数组件// 第一种// function Hello(){// return (// <div>react组件</div>// )// }// 第二种 必须要有返回值// function He
2021-07-27 20:46:00
215
原创 React 的介绍和脚手架安装
一.什么是 ReactReact是由Facebook（脸书）开源的一个进行创建用户界面的一款JavaScript库，如今已应用于Facebook及旗下的Instagram应用。React 是一个简单的 javascript Ui 库,用于构建高效,快速的用户界面.使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称为”组件”二.React 的特点高效灵活: react 使用 VDOM,减少了 DOM 的交互,而且它能与以知的库或框架完美配合react 的组件可以
2021-07-26 20:02:56
790
原创 Vue3 的Composition API
一.Composition API(常用部分)1.reactive作用: 定义多个数据的响应式const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象响应式转换是“深层的”：会影响对象内部所有嵌套的属性内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的<template> <h2>name: {{state.name}}</h2> <h2>age: {
2021-07-04 19:59:25
312
原创 Vue3 的新增特点和setup函数的使用
一.认识Vue3管网地址:https://v3.cn.vuejs.org/guide/introduction.html1.相关的信息Vue.js 3.0 “One Piece” 正式版在今年9月份发布Vue3支持vue2的大多数特性更好的支持Typescrip2.性能提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%使用Proxy代替defineProperty实现数据响应式重写虚拟DOM的实现和Tree-Shaking3.新增特性Composi
2021-07-02 21:01:27
423
原创 typescript 学习总结(3)
一.新的数据类型1.数组TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组。第一种 可以在元素类型后面接上[ ]let list1: number[] = [1, 2, 3]第二种方式是使用数组泛型，Array<元素类型>：let list2: Array<number> = [1, 2, 3]2.元祖（Tuple）属于数组的一种，数组合并了相同类型，元祖合并了不同类型let tom: [string, num
2021-07-01 20:00:54
160
原创 typescript 学习总结(2)
一.编译选项自动编译文件编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。示例:tsc xxx.ts -w自动编译整个项目如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.jsontsconfig.json是一个JSON文件，添加配置文件后，只需 tsc 命令即可完成对整个项目的编译生成配置文件tscon
2021-06-30 21:26:36
108
原创 TypeScript 的简介和一些基本类型
一.TypeScript 简介TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。二.
2021-06-29 21:27:12
337
原创 Vue Mixin 与小程序 Mixins 应用
一.什么是Mixin(混入)混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二.为什么要使用混入1.1 Mixin的优点混入可以减少程序中重复的功能，增强函数的复用性.当一个应用程序可能需要在各种对象中共享行为时，我们可以通过Mixin中维持这种共享功能并专注于程序中真正不同的功能，轻松避免任何重复，使项目结构更加清晰更加易于维护。2.1 Mixin的缺点Mixin是一种
2021-06-28 21:59:54
884
4
原创 微信小程序的npm,弹窗,组件总结
一.npm 包的使用1.Vant Weapp使用 Vant Weapp ( 它是ui 组件库)管网:https://vant-contrib.gitee.io/vant-weapp/#/quickstart安装 Vant 组件库步骤一 通过 npm 安装# 通过 npm 安装npm i @vant/weapp -S --production步骤二 修改 app.json将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆
2021-06-25 21:41:29
363
原创 微信小程序 的Mobx全局数据共享
一.全局数据共享1.什么是全局数据共享全局数据共享是为了解决组件之间数据共享的问题. 开发中常用的全局数据共享方案: Vuex,Redux,Mobx等2.安装 Mobx 相关的包在项目中运行如下命令,安装 Mobx 相关的包:npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1注意点:Mobx 相关的包安装完毕之后,要删除 miniprogram_npm 目录后,重新构建 npm3.创建 Mobx 的 Store
2021-06-24 21:29:32
528
1
原创 微信小程序 的声明周期,自定义组件,组件之间的通信方式
一.生命周期1.页面的生命周期应用声明周期指小程序从启动->运行->销毁的过程页面生命周期每个页面的加载->渲染->销毁的过程什么是生命周期函数(应用的生命周期函数,页面的生命周期函数)是由小程序框架提供的内置函数,会伴随着生命周期,自动按插叙执行应用的生命周期函数App({ // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onLaunch: function () { }, // 当小程序启动，或从后台进入前台显示，会触
2021-06-23 21:01:14
437
2
原创 微信小程序的全局配置文件的配置项和网络数据请求
一. 全局配置文件及常用的配置项小程序根目录下的app.json文件是小程序的全局配置文件pages 记录当前小程序所有页面的存放路径window 全局设置小程序窗口的外观,下面是window的一些配置项enablePullDownRefresh:true 开启下拉刷新功能“backgroundColor”: “#efefef” 下拉窗口的背景颜色“backgroundTextStyle”:“dark” 下拉刷新时 loading 的样式 只有两个值dark 和 light“onReachB
2021-06-22 21:41:54
759
原创 webpack的生成环境的一些配置,包括css文件的处理
一. 生产环境的基本配置1. 提取css成单独文件创建文件a.css 文件:b.css 文件:index.js 文件:index.html 文件:下载 mini-css-extract-pluginnpm i mini-css-extract-plugin -D修改配置文件const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin')const
2021-06-22 17:04:43
185
原创 微信小程序的注册和下载安装,对项目的介绍
一. 注册微信小程序访问 https://mp.weixin.qq.com/ ，点击“立即注册”选择“小程序”然后点击“链接地址”激活账号即可然后进行“主体信息登记”然后再填写小程序的一些基本信息，即可二、下载微信开发者工具点击“文档”这里选择“稳定版”三、打开微信开发者工具，新建一个项目其他的选默认的即可小程序的代码结构如下：1.首先有2个文件夹，pages和utils,pages里面主要存放一些页面相关的信息,utils文件夹里面存储一些公用的代码2.有4个全局
2021-06-21 21:56:19
202
1
原创 webpack的打包样式资源
一. 开发环境配置的以下几个方面1-1. 打包 html 样式资源步骤:在项目跟目录下运行npm initnpm i webpack webpack-cli -D在根目录下创建一个src文件夹,然后在src里面创建入口文件index.js和html样式index.html现在的目录如下:3.配置 webpack.config.js注意点:webpack.config.js 需要创建在根目录下我们需要安装 html-webpack-plugin 进行解析webpack.config.
2021-06-10 20:53:16
160
原创 webpack 的简介,五个核心概念
一. webpack简介webpack是什么webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 简单来说,webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言(例如:Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用webpack 五个核心概念entry入口:指示 webpack 以那个文件为入口起点开始打包,分析构建内部依赖图output
2021-06-09 21:56:10
549
原创 git基本操作,在GitHub上进行操作
一.Git 命令行操作1. 本地库初始化命令: git init (切换到目录>右键 Git Bash Here>用 liunx 命令到对应目录下>初始化)效果:会在当前目录下生成 .git 目录(隐藏的,解决办法:到当前文件夹→查看→显示和隐藏→勾选隐藏的项目)作用:初始化后,在当前目录下会出现一个 .git 目录,Git 需要的数据和资源都存放在这个目录中注意点: .git 目录中存放的是本地库相关的子目录和文件,不要删除,也不要随便修改2.初始化配置形式:用
2021-06-08 21:02:31
256
原创 git 的安装
版本控制什么是版本控制:版本控制是一种记录一个或若干文件内容变化,方便我们查看修改情况的系统,使用版本控制,管理代码的版本迭代为什么要使用版本控制:因为如果我们在一个项目上进行一系列的操作,但是我们又想回到原来的版本,这个时候我们就要使用版本控制1.集中化的版本控制系统简介:集中化的版本控制系统,例如:svn,把代码存放在单一的服务器上,开发工作人员连到服务器可以进行修改和提交更新.优点:把代码存放在单一的服务器上,方便对项目的管理缺点:如果这个集中化的服务器发生故障,那么开发人员就没有办法
2021-06-07 22:05:47
112
原创 vue-router 总结
一.介绍Vue Router 是 Vue.js 官方的路由管理器,或者说是SPA (单页面) 的路径管理器.通俗的说,vue-router 就是 WebApp的链接路径管理系统,在 vue-route 单页面应用中,是路径之间的切换和跳转的,也就是组件的切换,路由模块的本质就是建立起url和页面之间的映射关系二.基本使用1.开始(1) 安装 vue-router 包npm install --save vue-router(2) 定义路由创建route.jsimport Vue from
2021-06-05 18:37:50
191
原创 js this指向及改变this指向总结
面向对象语言中 this 表示当前对象的一个引用但在 javaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变一.关于this指向1.在方法中,this 表示该方法所属的对象var person = { firstName: "John", lastName : "Doe", id: 5566, fullName : function() { return this.firstName + " " + this.lastName; }};//
2021-06-04 18:59:49
324
原创 Cookie、LocalStorage 与 SessionStorage的区别
基本概念cookiecookie非常小,它的大小限制为4kb左右.它的主要用途有保存登录信息,比如登录某个网站时可以看到"记住密码",通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现localStorage 本地存储localStorage 是 HTML5 标准中新加入的技术,localStorage被大多数浏览器所支持sessionStorage 临时存储sessionStorage 与 localStorage 的接口类似,当页面关闭后,sessionStorage中
2021-06-04 15:13:54
145
原创 Promise用法总结
Promise是ES6的新特性,是异步编程的一种解决方案从语法上说,Promise是一个对象,从它可以获取异步操作的消息,可以解决回调地狱(回调地狱嵌套回调函数)Promise的含义:本身不是异步,是封装异步操作容器,统一异步的标准Promise对象的特点:对象的状态不受外界影响,一旦状态改变，就不会再变，任何时候都可以得到这个结果一.前引js中的异步操作有哪些ajax请求 var xhr = new XMLHttpRequest();xhr.onreadystatechange=fu
2021-06-03 18:37:16
10984
原创 Vuex学习总结
一.vuex是什么vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件间数据的共享好处:1.能够在vuex中,集中管理共享的数据,易于开发和后期维护 2.能够高效地实现组件之间的数据共享,提高开发效率 3.存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步二.如何安装,引入 vuex 步骤1.安装 npm install vuex --save2. src 里面创建 store 文件夹,创建 index.js 配置 vueximport Vue from "v
2021-05-29 18:31:50
99
原创 Vue基础知识总结
一. 管网https://cn.vuejs.org/二.简介1.渐进式框架,没有强主张,你可以在原有大系统的上面,把一两个组件用它实现,当jQuery用,也可以整个用它全家桶开发,还可以用它的视图2.是一个构建用户界面的框架3.是一个轻量级的MVVM(Model-View-ViewModel),其实就是所谓的双向数据绑定,数据驱动和组件化的前端开发,通过简单的API就能实现响应式的数据绑定和组合的视图组件好处:不用直接操作DOM就能改变里面的数据三.使用第一步 先引入 vue.js
2021-05-28 18:38:38
82
原创 JS中的同步和异步
一.单线程(1) 单线程的概念JavaScript是一门单线程的语言,因此,JavaScript在同一个时间只能做一件事,单线程意味着,如果在同个时间有多个任务的话,这些任务就需要进行排队,前一个执行完,才会执行下一个任务,为了解决这个问题我们在下面会介绍同步和异步<script> // 同步代码 function aa(){ console.log(1) } function bb(){ console.log(2) } aa() bb() // 输出结果
2021-05-27 19:56:25
304
1
原创 JS的作用域,作用域链,闭包
一.作用域概念:作用域就是变量和函数的可以访问的范围,在JavaScript中的作用域有全局作用域和局部作用域(作用域只会向上查找,从里到外)为什么要用作用域:变量不会外泄,对外不可见,相对安全,不同作用域间的同名变量不会起冲突1.全局作用域:最外层函数定义的变量拥有全局作用域,对于内部函数,都是可以访问这个全局定义的变量全局作用域的弊端:如果写了很多行的js代码,变量定义都没有用函数包含,那么它们就全部都在全局作用域中,这样就会污染全局命名空间,容易引起命名冲突<script>
2021-05-27 19:14:28
183
原创 什么是防抖和节流?
一、节流(throttle)高频事件触发,但是在n秒内只会执行一次,如果这个单位时间内触发多次函数,只有一次生效使用场景:频繁触发,onscroll滚动条过程:每次触发事件时都取消之前的延时调用方法用户拖动滚动条可以用 节流 方式实现mounted() { window.addEventListener('scroll', this.scrollToTop)},methods: { scrollToTop() { clearTimeout(this.tiemID);
2021-05-23 18:07:05
106
原创 vue脚手架安装
安装node.js1.地址:http://nodejs.cn/download/2.在cmd中输入node -v出现版本号全局脚手架vue脚手架可以快速生成vue项目基础的架构1.安装3.x版本的脚手架:npm install -g @vue/cli2.基于3.x版本的脚手架创建vue项目命令:vue create my-proiect3.配置勾选特性可以用空格进行勾选1.选择预设 Default ([Vue 2] babel, eslint) 默认只安装babel和eslint
2021-05-22 11:44:57
240
2
原创 【vue踩坑记录】 “Error in render: “TypeError: Cannot read property ‘main_material‘ of undefined“”渲染错误问题
[前提]:把数据遍历到页面时,页面遍历不出来,控制台报错,控制台报出"Error in render:TypeError:Cannot read property '0" of undefined,报错如下[如下图]:这里在渲染的时候,读取对象中的某个对象的属性值时,这个对象不存在,就是三层表达式,例如:现在三层表达式a,b,c,在对象中没有对象b,那么读取a,b,c中的值,就会报错[解决方案]:在上面的div中添加v-if判断条件,如果info.raw_material取不到,则不加载div
2021-05-21 19:34:32
264
1
原创 javaScript中的 !! 的作用
javaScript中的 !! 的作用let name = !!" "console.log(name) // falselet name2 = !!undefinedconsole.log(name2) // falselet name3 = !!'abcdef'console.log(name3) // truelet name2 = !'abc'; console.log(name2); // falsejs代码中有时会用到 ! 取反,对于布尔值类型会将值true和false切
2021-05-17 21:04:44
352
原创 javaScript中的ajax
javaScript中的ajax请求1.创建对象var xhr = null // ajax请求try{ xhr = new XMLHttpRequest() // IE8以下不支持}catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP")// IE8以下支持,处理兼容问题}2.初始化如果使用get方法,发送的数据要放在url地址后面xhr.open('get','1.php?name="zhangsan"&
2020-11-01 16:27:31
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人