地中海真帅-CSDN博客

原创 react 路由详细讲解(1)

介绍:今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦SPA的理解单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解① 什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component② 路

2021-07-30 21:12:39 790

原创 react ref和组件API

介绍:昨天学习到了生命周期,今天我们接着昨天的知识点继续学习,今天学习一下state ,setState以及ref和组件API,大家感兴趣的话可以跟随文章进行学习呦state和setStatestate 组件自身状态setState(updater[,callback])第一个参数:updater 更新数据的方法/对象第二个参数:callback 更新成功后的回调函数异步: react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能浅合并: Object.assign()Rea

2021-07-29 21:30:53 299

原创 react组件核心属性以及生命周期

介绍:昨天学习了react的基础知识及其项目搭建,今天我们接着昨天的知识继续学习官网地址: https://reactjs.bootcss.com/如果大家时间比较充裕的话可以看一下尚硅谷老师的视频,讲的非常详细,非常适合新手入门链接:https://www.bilibili.com/video/BV1wy4y1D7JT?p=43&spm_id_from=pageDriver模块与组件、模块化与组件化模块理解：向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块：随着业

2021-07-27 22:18:59 194

原创 react创建项目后使用npm start启动报错解决方案

如果项目使用npm start 报错的话,进入到项目目录后,输入npm run eject,以后再使用npm start启动项目,就解决了,最后附一张成功效果图

2021-07-26 22:33:42 752

原创 react基本使用及其安装

介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源 React的特点声明式编码组件化编码React Native 编写原生应用高效（优秀的Diffing算法）命令式编程和声明式编程告诉计算机怎么做（How） - 过程告诉计算机我们要什么（What） - 结果如何使用 React基于浏览器的模式React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件React.createElement(ty.

2021-07-26 22:30:15 924 6

原创 2021年前端热门面试题

什么是MVVM？他是一种模式,用来简化用户界面的本质是model 数据 view 视图viewmodel 视图和数据的桥梁的简写请详细说下你对vue生命周期的理解？beforeCreate() 创建前 created()创建完成beforeMount() 挂载前 mounted()挂载完成beforeUpdate() 更新前 updated()更新完成beforeDestroy() 销毁前 destroyed()销毁完成说明原生Ajax的实现步骤？并解释步骤的含义？.

2021-07-02 20:47:05 397 4

原创 Typescript(ts)之面向对象

介绍:昨天学习了typescript 的安装及其基本语法,今天来学习ts中比较重要的面向对象首先:面向对象面向对象是程序中一个非常重要的思想，它被很多人理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说：操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质.

2021-07-01 17:55:19 1030 4

原创 TypeScript超详细讲解

快速入门介绍:本篇文章我是跟随尚硅谷的李立超老师讲解的视频做的笔记,如果大家有时间的话可以学习一下老师的课程,讲的非常详细,如果时间不充裕的话,请看如下文章,进行学习https://www.bilibili.com/video/BV1Xy4y1v7S2?p=10、TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任

2021-06-30 17:59:06 582 3

微信小程序完结篇之生命周期

介绍:今天我们学习一下生命周期,这个是小程序基础的最后一个章节,小程序生命周期分为应用生命周期和页面生命周期应用生命周期属性类型默认值必填说明onLaunchfunction否监听⼩程序初始化。onShowfunction否监听⼩程序启动或切前台。onHidefunction否监听⼩程序切后台。onErrorfunction否onPageNotFoundfunction否⻚⾯不存在监听函数。示例代码：Ap

2021-06-29 20:13:37 142

原创微信小程序之自定义组件

介绍:今天主要来学习一下微信小程序的自定义组件,这也是基础部分的倒数第二节,最后还有一节生命周期,我们的微信小程序就算学习完成了自定义组件介绍:类似vue或者react中的自定义组件小程序允许我们使⽤自定义组件的方式来构建页⾯。1. 创建自定义组件介绍:类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构在⽂件夹内 components/myHeader ，创建组件名为 myHeader1. 声明组件⾸先.

2021-06-28 20:22:47 296 16

原创微信小程序之常用组件

常用组件重点讲解⼩程序中常⽤的布局组件view,text,rich–text,button,image,navigator,icon,swiper,radio,checkbox。等view代替原来的 div 标签WXML中写入 <view hover-class="h-class"> 点击我试试 </view>text介绍:⽂本标签只能嵌套text⻓按⽂字可以复制（只有该标签有这个功能）可以对空格回⻋进⾏编码属性

2021-06-25 20:30:33 534 4

原创微信小程序基础(4)

介绍:今天我们接着微信小程序继续学习,今天学习一下样式wxss和样式导入,及其less,这里有微信小程序的全套视频,老师讲的很好感兴趣的可以去学习一下https://www.bilibili.com/video/BV1nE41117BQ?p=65&spm_id_from=pageDriver 样式 WXSSWXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。与 CSS 相⽐，WXSS 扩展的特性有：响应式⻓度单位 rpx样式导⼊

2021-06-24 20:34:23 225 5

原创微信小程序基础详解(3)

介绍:昨天学习了全局配置和页面配置与目录结构,今天就开始学习模板语法之数据绑定,运算,及其列表渲染和条件渲染,当然还有比较常见的事件模板语法WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。1.数据绑定常见写法:WXML中写<view> {{ message }} </view>js文件中写入Page({ data: { message: 'Hello MINA!' }})

2021-06-23 20:52:57 456 20

原创微信小程序的基础配置和目录结构

介绍:昨天学习了小程序的安装和作用,今天就开始小程序的基础知识了,今天主要讲一下目录结构,全局配置和页面配置的一些属性官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html.一.目录结构如图components : 放自定义组件的地方，之前小程序是不支持组件化开发的，后来为了贴合大众开发口味，开始支持自定义组件。组件模版会在后面讲，这里只是了解一下目录构成。images：存放静态图

2021-06-22 21:04:50 844 6

原创零基础带你玩转微信小程序--小程序的基础和安装

什么是微信小程序?微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。为什么要使用微信小程序呢?微信有海量用户,而且粘性很高,在微信里开发产品更容易触达用户推广app或公众号的成本太高开发适配成本低容易小规模试错,然后快速迭代跨平台(苹果.安卓都可以使用)微信小程序的历史2016年1月11日，微信之父张小龙进行了公开亮相，这时候不仅解读了微信的价值观。而且还说明微

2021-06-21 17:12:01 429

原创 git基础详解(2)

git介绍:今天接着昨天的知识继续学习,今天学习一下查看历史版本,和版本前进后退,删除文件和分支,今天主要讲git的基础知识全部学习完成,明天学习将git的内容提交到github中git commit -m ‘提交时给的名字(自己取的)’ 需要提交的文件名(比如tt.txt) 将文件从暂存区提交至本地库提交完成之后没有可提交的话他会显示如下:如果还有没有提交的话,在重新将没有提交的提交一遍就好了(在暂存区但没有提交到本地库的):注意:每次提交的时候记得用git status来查看状态

2021-06-11 11:09:37 229 4

原创团队项目协作的处理之git基础(1)

git安装git 安装的话直接通过官网安装链接: [地址] (https://git-scm.com/).进入页面后点击这个进入进入页面以后看到下面的这些东西这个是选择32位和64位的版本,一般都为64位的版本安装的话没有要求的话可以一路next就行了git介绍是什么:Git是目前世界上最先进的分布式版本控制系统分为三个部分本地库(存储的每一个历史版本),暂存区(临时存储),工作区(新建文件,修改文件)远程库 git push后，文件由本地仓库，上传到远端仓库(githu

2021-06-10 20:22:58 253

原创 webpack基础详解(3)

知识点介绍:这篇是将webpack的剩余常用知识点进行总结,首先是plugin第二个常用插件,输入打包命令时,进行自动压缩,然后还有为打包的文件进行版权声明,还有一个大点热更新,还有学习webpack自己的一些总结plugin介绍:插件,通常是用于对某个现有的架构进行扩展webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩plugin的使用过程:步骤一:通过npm安装需要使用的plugins(某些内置的插件不需要安装)步骤二: 在webpack.confi

2021-06-09 20:42:43 483

原创 webpack基础详解(2)

介绍:这篇文章讲述了loader和plugin的一些知识,还有作者自己写代码中的一些错误,还有一些常用指令,当然了还有一些自己的总结loader使用过程:步骤一: 通过npm安装需要使用的loadernpm install --save-dev css-loader 安装css需要的loadernpm install –save-dev style-lodaer 安装style-loader推荐将style-loader与css-loader一起使用步骤二: 在webpack.confi

2021-06-08 20:37:16 255

原创 webpack 基础详解(1)

什么是webpack?webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。为什么要使用webpack?webpack可以根据模板生成HTML，并自动处理上面的css/js引用路径。webpack可以自动处理里面的图片路径，css里面背景图的路径，字体引用webpack可以开启本地服务器，一边改写代码，一边自动更新页面内容webpa

2021-06-08 08:24:56 322

原创跨域是什么,以及怎么解决跨域

跨域是什么跨域就是违反了浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，当发送请求时,如果不满足同域名,同端口,同协议的三项的话就会造成跨域,只要有一项不满足就会造成跨域,它是浏览器最核心也最基本的安全功能,如果没有同源策略的话,整个浏览器都会受到影响.怎么解决跨域正向代理和反向代理jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get

2021-06-05 16:27:17 243

原创 flex 弹性盒子布局

是什么:Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。优点:flex布局也叫弹性布局,可以简便、完整、响应式地实现各种页面布局注意:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。常用属性:flex-direction：设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上ju

2021-06-05 15:58:50 253

原创 ES6 set和map超详细讲解

set是什么 set 是ES6提供的新的数据结构,他和Array相似,但是set定义的值都具有唯一性,不能重复,可以存储任意类型的值使用set可以求数组的并集.差集.交集等等去重var mySet = new Set([1, 2, 3, 4, 4]);mySet为你定义的数组并集(相当于合并数组)var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var union = new Set([..

2021-06-04 20:13:17 712

原创小方块万能居中方法(任何分辨率下都能居中)

不说废话直接看代码都是干货<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

2021-06-03 20:19:57 359

原创 js轮播图(点击图片切换定时器效果)

轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> div.show{ width:600px; height:400px; border:2px solid red;

2021-05-28 10:47:13 1637

原创 vue cli 引入安装bootstrap插件

安装cli详细步骤请看之前文章呦安装bootstrap必装插件安装bootstrap必须要先安装jQuery 安装jQuery的方法在npm窗口中输入指令: npm install jquery --save-dev 安装完成以后开始安装bootstrap 指令:npm install bootstrap -D可选插件 bootstarp依赖插件(看需求是否安装)指令:popper.js:npm install popper.js -D..

2021-05-28 10:15:08 475

原创面试题 var let const的区别

var声明变量存在变量提升，let和const不存在变量提升什么是变量提升:变量提升就是变量和函数的声明会跑到代码的最前面，但是实际上变量和函数声明的位置并不会动，只是在编译过程中放入了内存之中.let、const在{}定义的是块级作用域,var定义的是全局局部作用域(全局变量和局部变量)块级作用域在{}中定义的就是一个块级作用域，在里面声明的变量外面不能使用全局局部作用域局部变量：在函数内部定义的变量，只在函数内部起作用，函数执行结束，变量会自动删除即在一个函数内部定义的变量，只..

2021-05-27 19:39:48 277

原创一篇文章教你学会vuex

vueX是什么是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享.什么情况下我应该使用 Vuex？Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是比较复杂的因为他分为一块一块的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好

2021-05-27 17:15:00 254

s_y_f_的博客