- 博客(120)
- 收藏
- 关注
RSS订阅原创 React函数组件路由和组件
函数组件路由和组件路由SPASPA的切换机制前端路由React Router安装组件BrowserRouter 组件HashRouter 组件Route 组件exactLink组件to属性作用使用:传递propsNavLink组件activeStyleactiveClassNameisActivewithRouter 组件(高阶组件，高阶函数，高阶路由)Switch 组件Redirect 组件hooks (*Router5.0之后出现的*)路由参数history :历史记录以及路由给我们提供的一些操作loc
2021-07-30 20:40:27
2908
原创 React类组件的属性和函数组件里的hooks
React类组件的属性和函数组件里的hooksPureComponentrefchildrendangerouslySetInnerHTMLkey函数式组件hook作用常用hookuseStateuseEffectuseRefHook 使用规则自定义组件PureComponentPureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致;import React,{PureComponent,Component} from
2021-07-29 20:48:07
592
原创 React生命周期,受控组件和非受控组件
state和setStatestate:里面存放的是数据;setState(updater,callback) :用来修改state里面的值 updater:更新数据是一个function/object callback:更新成功后的回调函数(很少用) 异步:react 通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能 浅合并 Object.assing()组件通信 在react中,是单向数据流,因此父组件可以把state通过props传递给子组件,但是子组件不
2021-07-27 19:26:56
320
原创 初始React,创建脚手架
1.概念:他是用于构建用户界面的 JavaScript 库;2.官网:中文:https://reactjs.bootcss.com/英文:https://reactjs.org/3.使用:基础:ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染 ReactDom.render(element,container,callback) element: 元素(内容); container:内容存放的容器; callback:回调函数(可选)//引入Rea
2021-07-26 21:26:58
167
原创 typescript基础(5)
模块: 把公共的一些功能单独抽离成一个文件作为模块; 模块里面的变量, 函数,类等默认都是私有的,如果我们需要在外部访问模块里面 的数据(函数,变量,类),我们就需要暴露模块里面的数据,然后通过import引入模 块就可以使用模块内的数据; 暴露模块export: // 方式一 export function a(){ ... }// 方式二 function a(){ ... } export { a }
2021-07-02 19:39:17
153
1
原创 typescript基础(4)
类:ES5的类和继承 function Person(){ this.name='张三'; this.age=18; this.run=function(){ alert(this.name+'在跑步') } } //原型链 //通过原型链添加属性 // 注意:原型链上的属性会被多个实例共享,构造函数的属性不会
2021-07-01 19:17:10
178
1
原创 typeScript的基础(3)
一:TypeScript是什么?他是以javascript为基础构建的语言;他是一个javascript的超集;可以在任何支持javascript的平台中执行;他扩展了javascipt并添加了类型系统;注意:Ts不能被解析器直接执行二、Typescript安装编译 在使用npm命令之前电脑必须得安装nodejs 安装npminstall-gtypescript或者cnpminstall-gtypescript或者yarnglobaladdtypescri
2021-06-30 20:22:12
229
1
原创 typeScript变基础(2)
变量和数据类型1.什么是变量?变量:用来存储数据得容器,并且是可以变化的;2.变量的使用?变量的使用分为两步：1 声明变量并指定类型 2 给变量赋值。第一步：声明变量并指定类型let age: number;解释：let 是 TS 的关键字，用来声明变量。lage 是程序员自己定义的变量名称。: number 用来指定变量 age 为数值类型。注意：分号是可选的，可省略.第二步:给变量赋值;age = 18;解释：l 使用等号（=）来
2021-06-29 20:32:29
202
1
原创 TypeScript基础(1)
一:TypeScript是什么?他是以javascript为基础构建的语言;他是一个javascript的超集;可以在任何支持javascript的平台中执行;他扩展了javascipt并添加了类型;注意:Ts不能被解析器直接执行二.TypeScript增加了什么? 1.类型; 2.支持ES的新特性; 3.支持Es不支持的新特性; 4.丰富的配置选项; 5.强大的开发工具;三.TypeScript 程序由以下几个部分组成：模块
2021-06-28 21:08:53
350
7
原创 微信小程序生命周期以及创建项目
5.小程序生命周期他分为应用生命周期和页面生命周期5-1.应用生命周期:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.htmlonLaunch : 应用第一次启动就会触发的事件作用:在应用第一次启动的时候就能拿到用户信息onShow : 应用 被用户看到;作用:当应用的数据或者页面效果 发生改变 重置onHide : 应用 被隐藏作用: //暂停或者清除定时器 onError
2021-06-25 19:57:40
167
1
原创 vscode里less生成css 以及小程序组件
vscode中小程序把less编译成css第一步:在vscode中下载less插件第二步，配置settings.json文件 （文件 - 首选项 - 设置 - 搜索设置settings.json）加入如下代码："less.compile": { "outExt": ".wxss" }如下:这时候如果在less文件中写代码,保存后会自动生成一个.WXSS的文件:4-1-3:注册组件在组件的js⽂件中，需要使⽤Component()来注册组件，并提供组件的属性
2021-06-24 20:56:34
548
2
原创 微信小程序bug和基础(3)
微信小程序网络连接失败一直显示网络连接失败,百度查说是把防火墙关掉,再不行,在防火墙允许的应用里加上微信小程序还是不行;最后终于找到解决办法:.1.win+r 输入cmd，打开命令提示符窗口2.2.输入命令： netsh winsock reset按回车键执行命令3.根据成功后的提示，重启计算机...
2021-06-23 19:34:50
261
2
原创 微信小程序基础（2）
1.小程序事件绑定⼩程序中绑定事件，通过bind关键字来实现,bindtap,bindinput``bindchange等; 1-1.wxml<input type="text" bindinput='handelInput'/> 1-2.jsPage({ data:{ num:0 }, handelInput(e){ this.setData{ num:e.detail.value }
2021-06-22 20:57:07
187
4
原创 详细安装微信小程序以及微信小程序基础(1)
1.小程序是什么?微信小程序,简称小程序,是一种不需要下载安装就可以使用的应用;2.为什么用小程序? 2-1.微信有很多用户,在微信里开发产品更容易接触用户; 2-2.推广app成本太高; 2-3.开发的适配成本低; 2-4.容易⼩规模试错，然后快速迭代。 2-5.可以跨平台使用;3.官网3-1: 官网:https://mp.weixin.qq.com/3-2:微信者开发工具:https://mp.weixin.qq.com/wxamp/devprofile/get
2021-06-21 19:48:29
790
原创 轻松学会git(2)
6. reset命令三个参数对比–sort 参数 仅仅在本地库移动HEAD指针–mixed参数 在本地库移动移动HEAD指针 重置暂存区–hard参数 在本地库移动HEAD指针 重置暂存区 重置工作区7.删除文件并找回7-1.删除文件: rm 文件名7-2.找回: git add 文件名 git status 查看状态 git commit -m ‘文件描述’ 再重新提交一遍7-3.前提:删除前,文件
2021-06-21 17:21:02
94
原创 一眼就懂,带你学会git(1)
Git命令行操作git的整个流程:git add: 从工作区提交到暂存区git commit -m ‘需要的名字’ 文件名字 将暂存区提交到本地库1.本地库初始化1-1 :命令: git add: 从工作区提交到暂存区 git init 初始化一个git仓库 ll 检测有哪些目录 ls -lA 检测隐藏目录(以. 生成的目录是隐藏目录) cd 文件夹名 进入那个文件夹 mkdir 文
2021-06-11 15:47:41
110
原创 webpack里的loader
Loaders网址:https://webpack.js.org/loaders/1.作用:为了解决除了js类型的(txt,md 之类的)2.代码示意loader: module:{ rules:[ { test:/\.txt$/, loader: 'raw-loader' //加载原始内容的loader } ], } 注意:webpack
2021-06-09 15:57:29
177
1
原创 介绍webpack
Wbpack介绍:WebPack是什么?他是一个使用node.js实现的一个模块化代码打包工具 ,可以将这些模块打包成一个或者多个包,是一个前端项目构建工具[打包器]作用:友好的模块化支持代码压缩混淆处理js兼容问题性能优化安装:webpack是基于node.js安装的,必须先安装nodel.js,再安装webPack.安装前记得先初始化再安装:npm init -y npm install -D webpack webpack-cli 注意: 不推荐全局安装(全局安
2021-06-08 20:01:54
191
原创 webpack和模块化
模块化:模块化是什么? 把复杂的问题分解成相对独立的模块;作用:模块化已经是现代前端开发不可或缺的一部分;可以降低程序的复杂性,提高代码的复用性,有利于团队协作开发与后期的维护与扩展模块化的核心独立的作用域如何导出模块内部数据如何导入外部模块数据独立的模块作用域一个文件就是模块，拥有独立的作用域，且导出的模块都自动处于 严格模式下，即：'use strict' 模块中的变量 ,处于严格模式下导出模块内部数据使用export语句导出模块内部语句//导出
2021-06-07 20:06:06
104
1
原创 vue基础(3)
插槽slot普通插槽使用:在子组件中使用 <slot></slot>占位,就可以在组件的标签中输入内容,放到插槽位置显示<组件名><h1>这里的内容会呈现在插槽中</h1></组件名>具名插槽<slot name='aa'></slot> 使用name属性给插槽命名使用 <template v-slot:aa></template> 标签和v-slot指令来使用动态插槽
2021-06-07 09:19:47
83
原创 vue基础(2)
过渡transition: 分为单行过度和多行过渡;属性 :name:指定动画名称 :key:比如多行过渡,两个标签相同只是内容不同,由于vue有diff算法会导致之后替换内容不会替换dom节点,就不能触发过渡效果,可以通过添加key这个属性指定不同的值来实现让他删dom节点...
2021-06-03 19:34:25
127
3
原创 vue基础(1)
简介他是一个渐进式的框架(就是一开始不需要你完全掌握它的全部功能特性，可以后逐渐增加功能。没有多做职责之外的事情)他是一个构建用户界面的框架;他是一个轻量级的MVVM（Model-View-ViewModel）;作用不用直接操作DOM(虚拟dom)就能改变里面的数据;官网https://cn.vuejs.org/v2/guide/安装(两种方式):第一种.script直接引入 <script src="https://cdn.jsdelivr.net/npm/vue"&g
2021-06-03 14:32:07
70
原创 关于generator的介绍
generator理解；generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次；我们先了解什么是函数。一个函数是一段完整的代码，调用一个函数就是传入参数，然后返回结果：例如：function foo(x) { return a+ a;}var bb = foo(1); // 调用foo函数函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的return undefined;），代码不会返回
2021-06-03 10:44:41
224
原创 关于ES6模块化的详细了解
ES6模块化理解：在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。例子:b.jsimport { aa } from "./a"a.jsexport const aa = '123'他就是个模块；导出 export： test.js文件export let myName="itlong";引入 import index.jsimport {myName
2021-06-03 08:18:31
354
原创 JS模块化开发规范
JS模块化开发规范commonJS规范Nodejs模块系统遵循此规范，适用于服务端1、 规范定义CommonJS规范规定，一个文件就是一个模块，用module变量代表当前模块。 Node在其内部提供一个Module的构建函数。所有模块都是Module的实例；一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性；2、 module.exports属性定义模块module.exports属性表示当前模块对
2021-05-27 19:18:40
95
原创 迭代器Iterator
迭代器（iterator）理解：Iterator 是 ES6 引入的一种新的遍历机制，迭代器是一个统一的接口，所有的迭代器对象都有一个next()方法，他有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，没有可返回的数据是返回true;作用：迭代器是用于遍历数据结构元素的指针，使各种数据结构可被便捷的访问，它是通过一个键Symbol.iterator 的方法来实现。迭代器的使用可以极大地简化数据操作，于是ES6也向JS中添加了这个迭代器特性，Set集合与Map
2021-05-27 18:54:26
118
原创 Class
classclass (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function,也可以说他是一个语法糖。使用class定义的类,没有变量提升.类作用:class写法可以让类的定义、继承更加的清晰，语法更加的面向对象在Es6以前定义一个类需要:function aa(x,y){ this.name = name; this.age = age;}aa.prototype.bb = function(){ console.lo
2021-05-24 20:18:30
139
原创 关于ES6里的proxy()
proxy()作用: 进行预处理,也可以说是在修改某些默认的行为,并且做出一层拦截,所有的访问都必须通过这层拦截,因此出了一种机制,可以对外界的访问进行修改他有两个参数,参数1 :被处理的对象 参数2: 处理的{}的方法例子:var b = new Proxy(obj,{ set(){ }, get(){ } }) set()方法:作用:可以做过滤他有三个参数: 参数1 原对象 var =obj{‘name’:“zhangsan”,age:18,im
2021-05-24 19:14:01
9723
原创 ES6 字符串的新特性
模板字符使用反引号 ``例子:let html=` <div> <p>哈哈</p> </div>`；使用:1.模板字符串中插入变量${变量名}2.模板字符串中插入变量${变量名}作用:!.可以解析变量2.可以换行3.空格和回车也会输出出来repeat作用:重复一个字符串;例子:let str =‘hellow’;console.log(str.repeat(2));//hellowhellowconsole.log
2021-05-23 19:05:17
202
原创 elementUi getBoundingClientRect() 方法
getBoundingClientRect()getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。getBoundingClientRect()获取元素位置，这个方法没有参数;getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档遮住的部分）。语法:var domRect = element.getBounding
2021-05-21 19:48:59
510
原创 ...扩展运算符和rest运算符
对象扩展运算符作用:相当于浅拷贝,一个发生变化另一个也会发生变化;let arr1 = [ 'www', 'baidu', 'com']let arr2= arra1arr2.push( 'js' )console.log(arr2) // [ 'www', 'baidu', 'com' ,'js']console.log(arr1) // [ 'www', 'baidu', 'com', 'js']当在arr2中push一个值时，arr1也会被改变，因为并没有在内存中重新开辟一个空
2021-05-20 12:25:08
280
原创 loading 加载
loading 加载他有几个参数作用:加载数据时显示动效。参数说明targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点lock同 v-loading 指令中的 lock 修饰符text显示在加载图标下方的加载文案spinner自定义加载图标类名background遮罩背景色customClassLoa
2021-05-20 09:56:36
2027
原创 vue this.$nextTick
this.$nextTick理解:this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新.例子:<template> <section> <h1 ref="hello">{{ value }}</h1> <el-button type="danger" @click="get">点击</el-button> </section>
2021-05-20 09:30:47
77
原创 vue项目 目录介绍
目录介绍meishijie-back 后端后端服务器meishijie-fe文件夹 : 前端 node_modules 放置依赖包 public 放公共文件和图片 打包不会压缩只是把文件复制一遍 src (放置主要内容) src assets 放公共文件和图片 动态加载图片需要加载require components 放复用的组件(公共组件) router
2021-05-17 20:11:42
96
原创 Bootstarp第三章 排版
类作用.h1~h6任何标签用这个类就有了标题标签的样式&.smll副标题标签和类.lead突出内容.text-left文本左对齐.text-right文本右对齐.text-center文本居中对齐.text-justify文本左右对齐.text-nowrap文本一行显示.text-lowercase大写变小写.text-uppercase小写变大写.text-capitalize首字母大写可...
2020-12-16 10:25:24
96
原创 ES6 新增的方法 深拷贝和钱拷贝
ES6新增方法indexOf :检测数组或字符串中是否包含某个值,如果包含返回第一次查找到那个值所对应的下标,如果 查不到返回-1Array.from(伪数组): 伪数组转换成数组find(回调函数) :根据查找指定值,符合条件的,会返回出来这个值,返回第一值之后就会停止查找filter(回调函数): 会把所有符合条件的值放到一个数组中返回出来map(回调函数) 映射 把数组里面的每一个元素按照你传入到毁掉函数里面的代码都执行一遍every(回调函数) 必
2020-12-16 09:39:07
418
原创 ES6 字符串 let var const区别 结构赋值
字符串普通的字符串: 不能解析变量,不能换行模板字符串: 可以换行定义,可以解析变量,空客回车也会输出来let var const区别var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问 分为全局变量和局部变量 可以将变量提升;let 1.定义变量 使用let关键字定义的变量,不能将变量提升 2使用let声明变量时,注意变量不能被重负定义; 3let 有块级作用域, 比如if后的{} switch的{} 都能生成块级作用域,作用域外部不能在访问这个变量了;let 1.
2020-12-16 09:33:11
103
原创 Bootstarp第二章
类名 大屏 lg 中屏 md 小屏 sm `超小屏 xshidden-lg 隐藏 显示 显示 显示hidden-md 显示 隐藏 显示 显示hidden-sm 显示 显示 隐藏 显示hidden-xs 显示 显示 显示 隐藏visible-lg 显示 隐藏 隐藏 隐藏visible-md 隐藏 显示 隐藏 隐藏visible-sm 隐藏
2020-12-15 10:57:37
203
原创 Bootatarp 第一章入门
1 bootstarp简介：--Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。--Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。2 bootstarp网址：--中文网址：https://www.bootcss.com/--外文网址： http://getbootstrap.com/--菜鸟网络：https://www.runoob.com/bootstrap/bootstrap-grid-system.ht
2020-12-15 10:43:27
239
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人