学习笔记
文章平均质量分 78
pray Serendipity
( strive , time )=> [ money, wife, car, house, and so on... ]
展开
-
TypeScript基础知识点
TypeScript基础知识点学习链接,胜洪宇老师的ts教程TypeScript静态类型定义:静态类型一旦定义即不可改变,如我们的const,且继承了类型的apilet count : number = 1//count为数字类型,不能为其他类型,同时count有了number的api,如toFiexd等等基础静态类型和对象静态类型基础静态类型 :加上数据类型const count : number = 918const myName : string = 'zhiwei'//还有 n原创 2021-03-23 11:37:34 · 126 阅读 · 0 评论 -
React核心知识点总结(全)
React知识点总结(全)一:React脚手架(create-react-app(cra))1:安装cnpm install -g create-react-app2:初始化项目create-react-app demoNmae3:了解react脚手架中的webpack配置文件 释放配置文件(一般不释放)npm run eject(要删除目录下的.git文件) 释放所有的webpack配置文件4:理解react设计的核心思想,一切皆为组件,可以细化一个元素5:React开发特性原创 2021-01-15 20:55:02 · 3030 阅读 · 0 评论 -
react原理总结
原创 2020-12-28 20:56:54 · 99 阅读 · 0 评论 -
安装并实现简单的redux应用
1、安装并实现简单的redux应用a、安装redux: cnpm i -S reduxb、新建一个store文件夹,暴露一个使用Redux.createStore方法创建的store对象出来c、需要新建一个reducers文件夹,暴露一个使用Redux.combineReducers合并后的reducer出来d、在reducers文件夹下边新建reduer文件进行单独的业务reducer开发e、因为action需要一个type,type一般为一个动作的类型/名字,所以需要使用静态变量来声明动作名字原创 2020-12-28 20:54:36 · 139 阅读 · 0 评论 -
搭建React开发框架
搭建React开发框架a、得到一个空项目,编写全局请求地址文件b、新建src/index.js作为项目的入口文件c、新建src/pages/index.js作为项目组件分发/入口的文件d、项目中需要使用ajax请求:安装axios来实现数据交互,开发的时候需要使用http-proxy-middleware做请求代理,cnpm i -S axios http-proxy-middleware,新建src/setupProxy.js 文件来做开发请求代理:导出一个方法,方法有一个Express()实例对原创 2020-12-28 20:53:02 · 168 阅读 · 0 评论 -
react中context的使用
react中context的使用context的作用:Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。使用步骤一:在react中通过我们的createContext方法创建我们的context二:一个context中包含一个provider和consumer三:创建我们的store文件,定义我们的提供者,返回我们的Context.Provider组件和Consumer组件,并在我们的Context.Provider组件给定value属性,必原创 2020-12-28 20:50:42 · 394 阅读 · 0 评论 -
react路由的简单使用
react路由:HashRouter 路由 有一个#,这种模式常用BrowserRouter:路由中没有#,会发送ajax请求,返回一个页面,需要后端支持,这种模式一般不怎么使用react-router-dom;是页面开发的路由,react-router-native:是react-native(RN)开发普通hash模式下:匹配路由以什么开头,或者与当前要跳转的路由一定匹配如果出现二级路由的时候,需要使用exact来精确匹配Route:一个路由的配置对象/组件,Redirect:重定向swi原创 2020-12-28 20:49:57 · 144 阅读 · 0 评论 -
React基础原理(state数据,setState方法,获取页面Dom节点,事件绑定,生命周期)
React基础原理(state数据,setState方法,获取页面Dom节点,事件绑定,生命周期)React组件内部state数据当state中的数据发送变化以后,会调用render方法重新渲染VDOM。state相当于重写,因为在react中,就有这个setState方法:为了解决多次设值state产生的多次渲染,会使用节流方法多次设值进行合并处理,相当于vue中的this.$nextTick()方法如果需要得到重新赋值后的值,应该在回调中去拿经典使用场景:第二次ajax请求,依赖第一次aj原创 2020-12-23 20:37:45 · 1173 阅读 · 0 评论 -
初始React
初始React一:使用React脚手架搭建项目框架安装命令:cnpm i -g create-react-app 或 cnpm i -g cra初始化一个项目:create-react-app react-demo(项目名称)了解react脚手架中得webpack配置文件(不可逆操作) 使用命令 npm run eject 或者 yarn eject ;释放所有得webpack配置文件,在react中,为了保护我们的框架的完整性,需要释放我们的webpack配置文件,就必须创建一个项目版原创 2020-12-22 20:06:07 · 193 阅读 · 0 评论 -
Vue项目总结
vue项目总结一:使用vue脚手架搭建项目框架具体操作步骤,参见志伟的博客二:项目开发1:系统进入页面,登录页面逻辑业务实现(路由指向)在APP端,我们的用户根据手机号,获取验证码登录。账号和密码在系统PC端的后台系统进行管理。(后台管理系统,由系统超级管理员进行用户权限设置)APP端的登录业务逻辑实现流程图(个人手绘,介意的话,参考下面德明老师的标准流程图)(德明老师的标准流程图)2:首页业务实现即相关逻辑分析项目布局优化—通用全局组件注册 在我们的项目会存在很多次页面跳转,以原创 2020-12-18 21:04:46 · 781 阅读 · 1 评论 -
vue组件以及vue组件的生命周期
vue的组件一个 .vue后缀的文件就是一个vue组件在项目的入口文件中 main.js 作为一个组件管理文件,在main.js里面引入其他组件定义区域块(script、 template、sytle 分别为js,html,css区域快)一个vue组件必须要导出 es6的导出 exprot defult在main.js里面就可以在render里面可以使用style代码块使用scoped来声明的样式,仅供当前页面使用。不加的话,是全局的样式,是一个预样式在一个vue组件中,需要引入其他组件,原创 2020-12-18 20:16:45 · 241 阅读 · 2 评论 -
vue中的状态管理器(Vuex)
vue中的状态管理器(Vuex)vuex插件 vuex是专为vue.js应用程序开发的状态管理模式原理当我们的组件数据发送改变的时候,我们这个组件的状态就改变了数据改变就为一个动作,然后store进行数据扭转,进行视图展示,然后形成一个闭环vuex提供一个仓库,为store,创建store实例对象。通过使用我们的状态管理器,可以进行组件之间的通信5个核心分别是state、getter、mutation、action以及module。:1、statestate状态数据,在state中需要定原创 2020-12-07 19:58:00 · 630 阅读 · 0 评论 -
vue中计算属性和观察属性
vue中计算属性和观察属性计算属性:computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化computed:{ //默认属性为一个getters属性 fullname: function (){ //被用来计算的数据,发生变化后,当前计算值会同步进行更原创 2020-12-07 19:57:24 · 403 阅读 · 0 评论 -
使用Axios库,在vue中发送ajax请求
使用Axios库,在vue中发送ajax请求一:将ajax单独出来,作为一个模块二:引入我们的axios库//这里Axios是一个静态的对象,不是axios的实例对象,通过Axios.create可以创建一个实例对象import Axios from 'axios'通过Axios.create可以创建一个实例对象//这里一些公共的配置,就写在初始化的配置中let axios = Axios.create({ baseURL:'http://www.xiongmaoyo原创 2020-12-05 17:13:21 · 102 阅读 · 0 评论 -
vue中路由的简单使用
vue中路由的简单使用一:安装我们的router插件cnpm i -S vue-router二:vue中路由的种类(这里列举两种,实际有三种)1:hash路由(常用):vue-router插件监听页面地址栏的hash值变化,来进行页面切换(hash变了,页面不会改变)2:H5 history模式:直接切换我们的地址,这种模式需要后端支持,把所有的页面路由指向我们的index.htmlvue-router为一个vue的核心插件将router注册为一个全局的组件,引入的router为一个cla原创 2020-12-05 15:17:16 · 161 阅读 · 0 评论 -
vue的动态组件、vue组件继承以及混合
vue的动态组件、vue组件继承以及混合vue的动态组件在页面上使用component占位符来声明组件要放置的地方,使用名字来说明当前组件是谁<component :is="组件变量名">vue组件继承以及混合继承:vue里面的继承都是单个继承。 使用extend来继承组件extend:component混合:把多个componentOptions 混合在一起,类似于实现一个多继承mininxs:[component1,component2]多例模式每个子组件继承的属性原创 2020-12-03 11:12:20 · 507 阅读 · 0 评论 -
vue的全局组件和插槽
vue的全局组件和插槽将一个vue的组件注册到Vue的构造器中,那么这个vue组件就是全局的了,这样就很方便的我们各子组件引入了(因为少写了代码)组件注册我们需要将我们的全局组件注册到我们的Vue构造器中,那么我们就可以在我们的main.js的实例对象中去注册,这样就成全局的了使用vue.use()方法,这个方法可以传入一个对象或者函数,对象的话,使用install属性,再component方法。函数直接使用component方法。这个方法传入两个值,第一个为我们全局组件的名字,第二个我们需要注册原创 2020-12-02 20:33:59 · 277 阅读 · 0 评论 -
vue的事件总线(EventBus)
vue的事件总线EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。创建EventBus Vue实例(两种方式)一:在main.js里面创建因为,我们是通过emit这个方法来触发EventBus的,而emit这个方法来触发E原创 2020-12-02 20:32:06 · 299 阅读 · 0 评论 -
vue组件之间的通信
vue组件之间的通信vue中定义:在组件中定义为:parentNode这样的组件,全部转为小写,为了组件名字的可阅读性,在第二个大写字母之前加上一个下划线 : parent-node,如果多个的话ParentNodeComp -> parent-node-comp父组件向子组件传递一:父组件给子组件传递,在子组件中接受这个属性,如果需要传递一个变量,那么这个属性需要被绑定使用 v-bind:命令二:在子组件中,需要对接收到的这个属性,变量进行定义,在script标签中,的props中父原创 2020-12-02 20:31:24 · 131 阅读 · 0 评论 -
使用vue脚手架(vue-cli)搭建项目框架
使用vue脚手架(vue-cli)搭建项目框架vue-cli 安装命令一:npm install -g @vue/cli(4.0脚手架的安装命令)二:使用npm/cnpm/npx/yarn 全局安装后的文件都放在C:\Users\demin\AppData\Roaming\npm三、使用cnpm/npm uninstall @vue/cli 这个并不能完全删除我们的安装库,手动直接删除(Shift + Delete 按键永久删除安装包)(如果有一天vue使用不了),进入上面的目录,删除vue相关原创 2020-12-01 21:01:41 · 309 阅读 · 0 评论 -
初步学习vue框架
初始vue一:我们在页面上修改数据,会触发页面的重排、重绘事件、并且需要查找DOM节点,并对节点进行一个DOM操作二:因为页面节点过多,现代业务需求复杂化,需要对页面节点进行频繁操作,造成的性能消耗三:这个时候我们就创建了虚拟DOM节点虚拟DOM就是一个普通的对象,这个对象对我们的页面节点进行了简单的描述,一般会包含几个属性(tag,props,children),这样我们每次更新多个节点或属性的时候,就只会进行一次DOM操作(需要把数据与我们页面的数据(用户操作对象,VDOM拷贝对象)进行一个双向原创 2020-11-30 20:36:16 · 81 阅读 · 0 评论 -
初始node,用node进行数据库连接(mongodb)操作,node后端接口开发,返回前端请求响应
初始node,用node进行数据库连接(mongodb)操作,node后端接口开发,返回前端请求响应一:node是什么?1、node.js是 一个js的运行环境,node是一个后端环境,搭载的是js语言2、它可用于服务端开发,这样可以避免我们开发语言的不同,导致开发量增加(全栈)3、单线程,指主线程为一个单线程,可以是使用库来实现多线程(fork方法)4、因为它是单线程,可以用于做高并发的应用 (高并发:它通常是指,通过设计保证系统能够同时并行处理很多请求)。但高密集型计算不使用5、未来-&原创 2020-11-28 14:31:38 · 597 阅读 · 0 评论 -
webpack初步认识,使用
webpack初识项目打包代码使用的工具一:webpack打包需要使用的那些webpack(webpack大部分用于单页应用的打包,只有一个html文件)打包工具,在package.json里面可以创建命令来使用webpack,或直接在cmd使用webpack命令。或创建自己的命令,npm run …命令。一般使用npm命令,为bulid,构建,打包。就会生成一个dist目录,所有打包的文件,都会在dist文件夹里面(会生成一个main.js)webpack-cli脚手架在调用webpack原创 2020-11-27 20:29:05 · 112 阅读 · 0 评论 -
双向绑定介绍以及vue双向绑定的原理说明
双向绑定的原理(vue)简介:双向绑定:指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地,如果UI包含了一个输入用户姓名的输入框,输入一个新值就应该会使user对象的name属性做出相应的改变。vue双向绑定的实现(2.0以上)一:通过这个方法 Object.defineProperty 来实现 双向绑定 ( vue 2.x)二:Object.prox原创 2020-11-27 20:26:18 · 1596 阅读 · 0 评论 -
使用node.js来连接mongodb数据库
使用node.js来连接mongodb数据库一:mongodb简介MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似json的bson格式,因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大,其语法有点类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引。二:准备工作1、安装node.js,官网地址:https://nodejs.org原创 2020-11-24 20:39:59 · 749 阅读 · 0 评论 -
(2020年11月10日学习笔记)项目中gulp工具使用流程
项目中gulp工具使用流程一:安装全局gulp命令行工具npm i gulp-cli -g二:初始化项目(生成package.json文件)npm init三:安装局部gulpnpm gulp -D四:创建项目子文件夹五:创建gulpfile.js文件六:在gulpfile.js文件中创建任务 1:制定paths路径(分为src(源)与 dist(或public)等目标路径),需要制定路径的有html,js,css,imgs,libs等src源里面的文件夹 2:创建h原创 2020-11-10 21:23:09 · 734 阅读 · 0 评论 -
(2020年11月4日)JQuery类库常用的方法讲解
原创 2020-11-04 19:51:55 · 79 阅读 · 0 评论 -
(2020年11月3日学习笔记)Git的使用工具
Git工具的使用(基本使用)一:Git工具初识Git是一个免费开源的分布式版本控制系统,用于快速高效地处理各种大小型的项目。二:Git现在常用的托管平台一:Github官网地址:https://github.com全球最大的代码托管平台,服务器在国外,访问速度较慢二:码云官网地址:https://gitee.comGitee.com 是 OSCHINA.NET 推出的代码托管平台,支持 Git 和 SVN,提供免费的私有仓库托管三:CODING官网地址:https://coding.n原创 2020-11-03 21:08:41 · 159 阅读 · 0 评论 -
(2020年11月3日学习笔记) 设计模式学习
设计模式概念:代表了最佳的实践,计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性设计模式的用途:设计模式在软件开发中的两个主要用途。开发人员的共同平台设计模式提供了一个标准的术语系统,且具体到特定的情景。例如,单例设计模式意味着使用单个对象,这样所有熟悉单例设计模式的开发人员都能使用单个对象,并且可以通过这种方式告诉对方,程序使用的是单例模原创 2020-11-03 11:53:21 · 138 阅读 · 0 评论 -
(2020年11月2日学习笔记)闭包深入理解,对象继承的方法(原型链继承,构造继承,语法糖继承)
一:闭包 在一些使用场景中,我们不想使用全局变量,但是又不想每次使用后改变其值,这个时候该怎么做呢。高级一点说”一个变量既能重复使用,又不会污染全局“这时候闭包就产生了闭包的重要理解:闭包可以在全局函数里面操作另一个作用域的局部变量形成闭包的步骤一:外层函数嵌套内层函数二:内层函数访问外层函数的变量三:外层函数的返回值为内层函数(注:不是返回内层函数的结果而是内层函数)闭包的实现原理这里引用了熊大林老师的关于闭包深入理解的文章2、外层函数调用时3、外层函数调用后4、内层函数调用原创 2020-11-02 17:52:40 · 450 阅读 · 2 评论 -
JS事件相关的知识及总结(事件兼容相关问题)
原创 2020-10-13 21:24:51 · 75 阅读 · 0 评论 -
(9月16日学习笔记)过渡属性,旋转,动画属性
2D 3D动画效果transition 过渡属性注意:下拉列框的滑动效果,用透明Opacity属性,不用display和visivlity,因为他们的效果有问题transform 属性注意点:变形属性,不能分开写,如translatex和translatey不能分开写,代码会覆盖,用缩写形式rotate:X轴表示上下,Y轴表示左右,Z轴表示顺时针或者逆时针 perspective属性...原创 2020-09-17 08:04:04 · 125 阅读 · 1 评论 -
(9月15日学习笔记),背景属性补充,渐变,媒体查询
css3继续补充背景属性:background-size:background-Origin background-Origin属性指定background-position属性应该是相对位置。注意如果背景图像background-attachment是"固定",这个属性没有任何效果background-clip多背景写法前面的会覆盖后面的渐变:媒体查询媒体查询由条件表达式组成的,真的就执行,假的就不执行关键字:media @ all表原创 2020-09-15 22:23:06 · 81 阅读 · 0 评论 -
(9月17日学习笔记)目标选择器 sticky定位,大小写转换,meat元信息,BFC
知识补充target 选择器sticky 定位吸顶效果常用大小写转换text-transformfont-variant 属性(小型大写字母)meta元信息关键词和描述BFC Block fomatting contex:块级元素上下文原创 2020-09-17 11:25:43 · 94 阅读 · 0 评论 -
(9月14日学习笔记)移动端适配布局
移动端相关知识rem介绍rem(font of the root )相对于根元素子字体大小的单位作用:可以实现屏幕适配rem是css3新增的单位rem的使用相对于根元素字体大小的单位,使用它必须参照html(font-size)如html(font-size:20px) 1renm-20px 默认情况1rem=16pxrem最大的好处就是根据html字体大小改变本身 动态的变化适配方案第一种:使用js来实现,直接使用script标记把需要的js文件引入,js文件里面有一个原创 2020-09-14 16:16:24 · 98 阅读 · 0 评论 -
(9月11日学习笔记)弹性盒
弹性盒弹性盒布局也叫伸缩布局盒模型 flexbox 它是css3新增的一种布局方式定义一个弹性盒:display:flex;给容器设置了一个弹性盒后,当容器成为弹性盒后,里面的子元素默认方向为横向排列弹性盒布局的作用:让容器有能力去控制子元素,对齐方式(位置),大小,顺序等等专业术语解释:轴的概念,主轴为x轴,侧轴为y轴x轴为:左边框到右边框的距离y轴为:上边框到底边框在之前的布局中,把容器称为夫元素,里面的元素为子元素,在弹性盒里面,夫元素称为伸缩容器,子元素称为子项目(弹性流)原创 2020-09-11 15:46:54 · 172 阅读 · 0 评论 -
(9月10日)学习笔记 css3属性介绍
css3介绍:1、css3层叠样式表,css层叠,样式表和权重的规则,优先级针对于样式表,权重针对于选择器2、css3时css的第三个版本,并不是一门新的语言3、css3新增了很多的属性,不是一个单一的模块(规范),多个模块的同时进行的,这样的好处彼此之间不会相互影响4、之前的css发展中,类似于一个小作坊,几个人什么都要干。css3针对了不同模块的划分,提高了效率选择器...原创 2020-09-10 19:01:09 · 108 阅读 · 0 评论 -
(9月9日学习笔记)H5相关书写规范和新特性、盒模型、
H5的介绍HTML5的介绍:1、指的是HTML超文本标记语言的第五个版本2、随着技术的发展,HTML5里面新增很多的东西,其实现在HTML5不仅仅指的是HTML的第五个版本,而是一个行业的标准3、现阶段学习HTML5技术,其实学习的整个前端相关的所有技术,基础:html html5 css css3 js这几个只会新增一些东西,但是技术方向不会改变4、html5新增的标记,只是它的一部分内容而已,html5新增的标记语义化更强了,例如 header nav main footer 这些标记5原创 2020-09-09 15:49:10 · 274 阅读 · 0 评论 -
(9月8日学习笔记) 表单和表格相关标签、属性补充
表单和表格补充fieldset标签和legend标签<fieldset>标签的定义和使用fieldset元素可将表单的相关元素分组。fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到<fieldset>标签内时,浏览器会以特殊的方式来显示它们,它们可能有特殊的边界,3D效果,或者甚至可以穿件一个子表单来处理这些元素。<legend>标签的定义和使用legend元素表示作为legend元素的父元素fieldset元素的其余原创 2020-09-08 21:42:15 · 141 阅读 · 0 评论 -
(9月7日学习笔记) 宽高自适应、流式布局、bisiblity元素隐藏 伪对象选择器 代码实现三角形 常见的浏览器兼容问题 浏览器的内核
宽高自适应根据需求提出来的,在实际开发中,大家发现元素最外层宽度或者中间内容区域的高度如果写成固定形式,不方便内容增加或者更改提出了宽高自适应解决方案:宽度:自适应,块级元素,不设置宽度,或者宽度设置100% 或者width:auto;(区别:一个没有设置宽度,一个设置了宽度)高度:块级元素不设置高度,或者height:auto,不能设置为100%,否则会充满屏幕希望元素一开始就有高度,随着内容变化,增加,高度自适应提出最小高度的概念:min-height,满足上述需求其他的高度自适应m原创 2020-09-07 21:40:16 · 202 阅读 · 0 评论