- 博客(27)
- 收藏
- 关注
原创 redux -- reducer -- 划分
redux – reducer – 划分分析一个项目:banenrhomemineloginregisterdetailshopcar会员普通用户数据解决: 希望的一个类型数据一个模块 ---- 》 reducer划分 combineReducers分析: 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包解决: redux comb...
2019-06-21 10:01:27
318
原创 Flux使用流程
Flux使用流程Flux的使用流程要想使用FLux架构思维,需要通过一个工具进行使用, 这个工具就是flux安装 flux$ yarn add flux在src目录下 新建store目录,里面新建index.jsstore有两个功能存储数据当数据发生改变时,视图要进行更新 ( 当前组件中的state发生了改变,从新从store中获取数据,要想重新复制,那么要通过事件的发布,订...
2019-06-21 09:57:58
982
原创 react hook
hook作用: 可以让我们在函数式组件中添加state,也可以让我们使用部分生命周期钩子函数useState useEffect import React,{ useState,useEffect } from 'react' const Item = ( props ) => { return <li> { props.content } <...
2019-06-21 09:56:04
846
原创 react router
react router 4.0 react-router-domReact router的模式:HashRouter老浏览器的history,通过hashchange事件来监听url的变化情况BrowserRouter新浏览器的history,借助了H5提供的createBrowserRouter来实现,通过监听popstate事件来实现(可以去掉地址栏的 #符号)...
2019-06-21 09:53:40
327
原创 React生命周期
React生命周期初始化阶段1. constructor(props)React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时,需要先在添加其他内容前,调用super(props),用来将父组件传来的props绑定到这个类中,使用this.props将会得到。官方建议不要在constructor引入任何具有副作用和订阅功能的代码,这些应当使用componen...
2019-06-17 22:00:42
137
原创 webpack浅析
前端的工程化和自动化grunt gulp browserify webpack当今主流 webpack vue react angular当前市面2 个版本 webpack 3.0 webpack 4.0webpack 4一、webpack 基础认识官网地址官网: https://webpack.js.org/中文: https://www.we...
2019-06-17 21:58:39
213
原创 Vue-router
RouterSPA ( single page App ) 单页面应用多页面应用有多个html文件,通过a标签的连接联通各个页面缺点开发起来太冗余,编译、压缩很耗时间页面之间的跳转速度太慢单页面应用不需要刷新页面,因为它就是一个页面这个页面内容在切换单页面内容之间的切换要想实现我们就是用路由了如今我们的app主要的开发形式就是spavue路由功能...
2019-06-11 09:20:06
289
原创 Vue-cli
clicli是什么?cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是: webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本如果我们还想使用...
2019-06-11 09:12:59
161
原创 Vue组件通信
组件通信父→子组件通信父组件将自己的数据传递给子组件父组件将自己的数据通过属性绑定的形式传递给子组件<Son :aa = "num"></Son>子组件在自己的配置项中通过 props 来接收这个属性 Vue.component('Son',{ template: '#son', // props: [...
2019-05-29 20:30:49
146
原创 浅谈Vue中的自定义组件、指令、事件
1. 自定义组件( 插件 )案例: 封装一个 Loading 组件Loading是用来做什么的?基于用户体验loading使用方式很多第三方的ui库/组件库自定义封装过程:创建一个目录文件夹,称之为Loading在loading中创建一个叫做component目录,用来放模板在Loading目录下创建一个index.js~ import Vue from 'vue' ...
2019-05-29 20:29:16
748
原创 Vue中的插槽
插槽 solt单个插槽soltsolt标签通过在组件模板中识别组件的起始标签和结束标签之间的内容插槽内可以包含任何模板代码,包括 HTML 甚至其它的组件具名插槽有时我们需要多个插槽。例如对于一个带有如下模板的 组件 <div class="container"> <header> <!-- 我们希望把页...
2019-05-28 21:52:41
295
原创 Vue中的过渡、动画、动态组件
过渡与动画vue中实现过渡或是动画一共提供了这样四种形式:在 CSS 过渡和动画中自动应用 class – 自己写css3动画可以配合使用第三方 CSS 动画库,如 Animate.css – 别人写好了类名,我们用在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生...
2019-05-28 21:50:23
996
原创 Vue中的过滤器
过滤器vue 1.x内部提供提供了 10 个过滤器, 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化什么叫过滤器?格式化数据的一个工具举例:12.22225 —> 12.2Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28过滤器一样也...
2019-05-28 21:48:10
166
原创 Vue中的生命周期
Vue中的生命周期什么是生命周期呢?当前组件在创建到销毁经历的一系列过程,称之为生命周期生命周期的分为几个阶段?每个阶段有哪些钩子函数?生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁初始化阶段:有4个钩子函数,触发条件是自动的beforeCreate组件即将创建,进行组件事件和生命周期的初始化项目中一般不使用有的开发者也会在...
2019-05-28 21:46:34
3641
1
原创 Vue中的组件
Vue中的组件组件化组件化是当今最为流行的一种可复用性增加的方法,随着当今前端开发的复杂度更加,组件化变得越来越流行组件的基础组件是一个具备html css img js …等的一个聚合体组件的表现形式就类似一个标签组件至少得有模板组件Vue.js通过Vue.extend() 方法来扩展 组件的 使用Vue.extend( options ) 里面的o...
2019-05-27 21:51:08
192
原创 Vue中的计算属性和侦听属性
computd 计算属性案例: 为什么vue中要使用计算属性?让一个字符反向分析:<p> {{ msg.split('').reverse().join('') }} </p>上面代码的写法,有些违背关注点分离,而且会让我们的DOM结构看起来不简洁解决方案:从上面的案例得出两个结论:1. 我们的使用结果是要想data选项中定义的数据一样直接使用,那...
2019-05-25 17:12:05
248
原创 Vue中的数据请求
数据请求数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求ajax( 一般需要我们结合Promise去封装,使用不是很便利,但是效率很高 )fetch( 本身结合了Promise,并且已经做好了封装,可以直接使用 )使用别人封装好的第三方库目前最流行的,使用率最高的是 axiosvue中我们最常使用的vue 1.x 的版本提供了一个封装...
2019-05-25 17:08:37
732
原创 浅谈Vue中的虚拟DOM
浅谈Vue中的虚拟DOM什么是虚拟DOM?使用虚拟DOM有什么好处?虚拟dom案例: 来说明为什么 virtual dom 是好用的我有一个数 0 ,我希望这个数自增到 10001 , 然后让这个数据输出到页面中? var box = document.querySelector( '.box' ) ; var count = 0 ; // console....
2019-05-25 17:06:36
1530
原创 Vue基础认识
指令Vue 指令 组件作用: 是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能,这个功能用来操作DOM这个指令需要模板语法的支持,所以我们采用jsx语法糖模板语法模板语法支持性还是很高的,数据类型都是支持的,但是不支持 输出语法 ( console.log alert )指令格式:v-xxx = “mustache语法”v-xx...
2019-05-23 22:08:00
157
原创 初识Vue
初识Vue什么是框架?什么是库?框架是有一套自己的生态系统的库是没有自己的生态系统的, 它就只是一个工具Vue.js是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的...
2019-05-22 20:52:23
271
原创 mongoose操作数据库
mongoose操作数据库mongooseMongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,Mongoose将数据库 中的数据转换为JavaScript对象以供你在应用中使用。mongodb这个数据的操作肯定不止一种形式,mongoose只是其中一种mongoose操作流程安装mongoose$ cnpm ...
2019-05-21 20:28:52
705
原创 MongoDB
MongoDB什么是数据库?数据库(Database)是按照数据结构来组织、存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据库技术得到了更加快速的发展,应用得更加广泛。主要用它进行管理各种系统的数据,作为科学研究和决策的重要技术手段关系型数据库的概念 , 常用的数据库有哪些?关系数据库:是建立在关系数据库模型基础上的数据...
2019-05-20 21:34:21
161
原创 npm脚本与Nodejs的后端渲染
npm-script什么是npm-脚本允许在package.json文件里面,使用scripts字段定义脚本命令。{// ..."scripts": { "build": "node build.js"}}上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node bui...
2019-05-16 21:40:20
645
原创 前端异步流程工具
前端异步流程工具Promise const p1 = new Promise ( function ( resolve, reject ) { resolve( '任务一' ) }) .then ( function ( data ) { console.log( data ) }) ...
2019-05-16 21:38:28
202
原创 Node.js中常用的模块
Node.js 常用的模块url核心api有三个parse:String --> Objectformat:Objext -=> Stringresolve: resolve(‘str’,‘str’) 拼接querystring功能:Node.js中的字符核心方法parse:将String – > Objectparse( str , arg1 ...
2019-05-15 21:36:19
251
原创 模块/包与Common.js
模块/包 与Common.jsNode.js使用了Common.js规范Node.js中Common.js规范有三种使用类型:内置模块 path url fs precess1.1内置模块很多,我们下面以 磁盘处理的模块 为例内置模块我们注重的模块的使用使用步骤:(1) 先引入模块,然后用一个变量保存这个模块( 内置模块在requrie(模块名称) )(2) 使用这...
2019-05-15 19:19:21
293
原创 什么是Node.js
什么是Node.js?Node.js是一门后端语言基于Chrome v8引擎的js运行环境除此之外:还有其他的引擎: 单片机、actionscriptNode.js有两大特征事件驱动事件的定义(发布)事件的触发(订阅)非阻塞式 I/O 模型非阻塞 : 执行一个任务时,不需要等待这个任务执行完成,就可以去执行其他任务I/O: 磁盘文件操作 / 数据库数据操作...
2019-05-13 20:26:33
134
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅