- 博客(31)
- 收藏
- 关注
RSS订阅原创 flux
Flux的使用流程要想使用FLux架构思维，需要通过一个工具进行使用， 这个工具就是flux安装 flux$ yarn add flux在src目录下 新建store目录，里面新建index.jsstore有两个功能存储数据当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ）...
2019-07-06 14:50:15
211
原创 Mbox
MobxMobx是一个功能强大，上手非常容易的状态管理工具。redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。这张图来自于官网，把这张图理解清楚了。基本上对于mobx的理解就算入门了。官网有明确的核心概念使用方法，并配有egghead的视频教程。这里就不一一赘述了。要特别注意当使用 mobx-react 时可以定义一个新的生命周期钩子函数 compon...
2019-07-06 14:48:15
1020
原创 redux和react-redux、redux-thunk
reduxredux也是一个架构思维， 在这个架构思维中 React 充当是 视图 V------------- redux 基础 – start ----------------------------------redux使用流程 ( todolist – 增加一条数据 )redux是一个架构思维，我们实现需要一个工具，这个工具叫做redux安装redux$ yarn ...
2019-07-06 14:46:52
258
原创 react事件处理
事件处理绑定事件采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。事件handler的写法直接在render里写行内的箭头函数(不推荐)在组件内使用箭头函数定义一个方法(推荐)直接在组件内定义一个非箭头函数的方法，然后在render里直接使用...
2019-07-06 14:44:56
111
原创 React中hook 和 router
hook作用： 可以让我们在函数式组件中添加state,也可以让我们使用部分生命周期钩子函数useState useEffect import React,{ useState,useEffect } from 'react' const Item = ( props ) => { return <li> { props.content } <...
2019-07-05 15:28:20
1485
原创 react数据的属性和状态
组件的数据挂载方式React中数据分为两个部分属性状态经验： 频繁变化的就写成状态属性(props)props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props属性是描述性质、特点的，组件自己不能随意更改。之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以...
2019-07-05 15:20:13
393
原创 react组件类型、样式、属性和状态
编写第一个react应用程序react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引...
2019-07-05 15:19:09
655
原创 React生命周期
组件初始化阶段constructor constructor ( props ) { /* 1. 通过super来继承父类身上传递过来的属性，让后当前组件通过this.props接收 2. 用来初始化一个状态 3. 用来初始化绑定一个方法，将this传递给这个方法 注意： 不写方法的触发（ 订阅 ） ...
2019-07-04 21:51:22
181
原创 webpack 前端的工程化和自动化
前端的工程化和自动化grunt gulp browserify webpack当今主流 webpack vue react angular当前市面 2 个版本webpack 3.0webpack 4.0webpack 4一、webpack 基础认识官网地址官网: https://webpack.js.org/中文: https://www.webpackj...
2019-07-04 21:50:12
154
原创 webpack安装、工程化概念、react起源
ReactReact学习内容webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle其它相似打包工具还有rollup.js 、 parcel...
2019-07-04 21:49:25
150
原创 git命令
配置公钥(私钥在本地)1.配置个人用户信息和电子邮件地址git config --global user.name “用户名 ”git config --global user.email “你的邮箱”git config --list (查看所有配置项)输入如下命令：ssh-keygen -t rsa -C “你的邮箱” --回车直到结束。生成ssh进入github配置公钥cd ...
2019-07-04 21:46:39
90
原创 Vuex状态管理
状态管理(vuex) store（集中式的存储管理）什么时候用： 打算开发中大型应用集中式数据管理, 一处修改，多处使用思维流程:store.jsthis.$store.commit('increment') -> mutationsthis.$store.dispatch('jia') -> actions mapAction...
2019-07-04 21:45:36
112
原创 Vue-router
RouterSPA （ single page App ） 单页面应用多页面应用有多个html文件，通过a标签的连接联通各个页面缺点开发起来太冗余，编译、压缩很耗时间页面之间的跳转速度太慢单页面应用不需要刷新页面，因为它就是一个页面这个页面内容在切换单页面内容之间的切换要想实现我们就是用路由了如今我们的app主要的开发形式就是spavue路由功能...
2019-07-04 21:44:39
246
原创 vue-cli
clicli是什么？cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于我们之前所学的 express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是： webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本...
2019-07-04 21:43:27
114
原创 Vue生命周期
Vue生命周期生命是生命周期呢？当前组件在创建到销毁经历的一系列过程，称之为生命周期生命周期的分为几个阶段？每个阶段有哪些钩子函数生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁初始化阶段：有4个钩子函数 ， ***** 触发条件是自动的beforeCreate组件即将创建，进行组件事件和生命周期的初始化项目中一般不使用有的开发者也会在这里进行数...
2019-05-29 22:40:31
295
原创 Vue的slot，transition ，动态组件 和 过滤器
小宝贝 13:39:45Vue的slot transition 动态组件 过滤器slot普通插槽<body><div id="app"> <Hello> <header> 头部 </header> <section> 内容 </section> <footer> 底部 <...
2019-05-29 13:50:17
185
原创 Vue组件
组件组件化组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行组件的基础组件是一个具备html css img js …等的一个聚合体组件的表现形式就类似一个标签组件至少得有模板，模板用template表示，相当于el，但是不能用el，因为被根实例占用了Vue.js通过Vue.extend() 方法来扩展 组件的 使...
2019-05-29 13:38:08
106
原创 虚拟DOM 和 Diff 算法，key的作用，jsx,render函数
虚拟DOM 和 Diff 算法什么是虚拟DOM？使用javascript模拟了DOM结构的树形结构（对象表示），这个树结构包含整个DOM结构的信息使用虚拟DOM有什么好处？操作数据要大大的减少性能损耗，提高渲染效率越多的真实dom操作，越损耗性能什么是Diff 算法？是linux的基础命令，用来比较两个文本文件的差异，是代码版本管理的基石之一vdom中应用di...
2019-05-29 13:26:13
191
原创 计算属性computd，侦听属性watch，事件处理函数methods和mixin
小宝贝 13:02:11computd vs watch vs methods项目中：computed计算属性：有逻辑像变量一样使用一定要有return返回值 <div id="app"> <p> {{split_msg}} </p> </div> new Vue({ ...
2019-05-29 13:04:44
236
原创 Vue数据请求 axios和fetch
Vue数据请求数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 )fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 )使用格式：使用别人封装好的第三方库目前最流行的，使用率最高的是 axiosvue中我们最常使用的v...
2019-05-29 12:55:55
414
原创 Vue模板语法mustache语法列表渲染、事件与单双向数据绑定
模板语法 mustache语法 双大括号语法指令Vue指令组件作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖模板语法模板语法支持性还是很高的，数据类型都是支持的，但是不支持...
2019-05-26 21:35:00
601
原创 前端框架的发展史与Vue.js第一次使用
1. 前端框架的发展历史前端工程师（ 攻城狮 ）12年 html css + div13年 js 加入 jquery14年 MVC angular1.0 react15年 vue 微信小程序2. Vue.js第一次使用什么是框架？什么是库框架是有一套自己的生态系统的库是没有自己的生态系统的， 它就是一个工具查看vue.js的源代码暂时学习使用的是 全局变量 ...
2019-05-22 22:03:58
451
原创 mongodb数据库认识与mongoose操作流程
mongodb关系型数据库 概念 ， 常用的数据库有哪些？非关系型数据库 概念，常用数据库mongodb 和 sql区别sql 是 数据库 表 行NoSql 是 数据库 集合 文档bson是mongodb的数据存储格式bson是json的超集数据库功能是用来存储数据的。数据库分为关系系数据库和非关系型数据库(nosql)关系...
2019-05-21 22:42:46
141
原创 api接口暴露
api接口暴露测试接口是否正常，我们可以使用测试工具：postman insomniaBE: BackEnd 后端express中一个路由即一个接口api接口暴露的方式有两种：第一种： 使用模板进行暴露，但是要将数据做字符串转换，然后使用ejs的非转义输出 router.get('/',function( req,res,next ) { res.render(...
2019-05-21 21:59:31
924
原创 express 中间件 （Middleware）
express 中间件 （Middleware）中间件是一个函数,函数中参数有三个：request 请求response 响应next 请求和响应中间的循环流程中间件有三种类型应用级中间件路由中间件错误处理中间件前端的请求方式有几种？getpostputdeleteheadall以上的请求方式统称为： restful apirestfu...
2019-05-21 21:52:27
253
原创 前端渲染与后端渲染
前端渲染与后端渲染前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端后端模板ejspug( jade )art-template现在流行的： 前端渲染问题： 当前后端同时进行项目开发是， 后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？分析： 需...
2019-05-21 21:43:21
166
原创 前端异步流程工具
传统： 回调函数流行：Promise *最流行 const p1 = new Promise ( function ( resolve, reject ) { resolve( '任务一' ) }) .then ( function ( data ) { console.log( data ) }) const...
2019-05-21 20:08:28
106
原创 Node.js的原生路由
Node.js原生路由以下是原生路由的做法，通过监听前端发来的url，来作判断，弊端：图片需要重新发送出去var http=require('http');var fs=require('fs');http.createServer((req,res)=>{ //console.log(req.url) switch(req.url){ case '/...
2019-05-21 19:17:55
185
原创 Query String模块与http小爬虫、events模块、fs模块、stream模块的一些操作
querystring模块功能：是node.js中处理字符的核心方法parse：将string->objectparse( str , arg1 , arg2) str: 你要处理的字符 arg1: 分隔字符 arg2: 将 = 转化为 : , (这句话前提是 & 符号是提前被转化的) var qs=require('querystring'); ...
2019-05-21 17:40:54
817
1
原创 Node.js创建静态服务器、模块的上传和使用（前端模块化）
Node.js服务器Node.js服务器有两种web服务器（ 静态服务器 ）api服务器（ 动态服务器 ） 数据接口用Node.js创建一个静态服务器,然后将二阶段项目部署在这个服务器中源代码：var http = require( ‘http’ );var port = 8080 ;var hostname = ‘127.0.0.1’var path = require(...
2019-05-15 22:48:17
123
原创 浅谈Node.js安装与使用
什么是Node.js?Node.js是一门后端语言基于Chrome v8引擎的js运行环境除此之外：还有其他的引擎： 单片机、actionscriptNode.js有两大特征事件驱动事件的定义（发布）事件的触发（订阅）非阻塞式 I/O 模型非阻塞 ： 执行一个任务时，不需要等待这个任务执行完成，就可以去执行其他任务I/O： 磁盘文件操作 / 数据库数据操作...
2019-05-14 22:03:32
205
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人