2018年03月_DreamFive

原创 Vue 简介及内部指令

目录目录vue.js 是什么？vue 内部指令1、声明式渲染2、v-if v-else v-show 指令3、v-for 指令：解决模板循环问题4、v-text & v-html5、v-on：绑定事件监听器6、v-model指令7、v-bind 指令8、其他内部指令(v-pre & v-cloak & v-once)v...

2018-03-26 23:40:03 475

原创第 20 章、JSON

先说一下，有些章节我没有整理，其中有些是关于 XML 的，所以我跳过了，感兴趣的可以自己去搜一下。目录目录语法解析与序列化JSON 对象序列化选项解析选项语法JSON 的语法可以表示以下三种类型的值。简单值：可以在 JSON 中表示字符串、数值、布尔值和 null 。但 JSON 不支持 JavaScript 中的特殊值 undefined ...

2018-03-26 11:37:24 177

原创第 17 章、错误处理与调试

目录目录浏览器报告的错误错误处理tyr-catch 语句小结浏览器报告的错误这个就不介绍了，它主要是针对开发者，各个浏览器的相关信息用到的时候临时搜一下就好了，没必要去系统的学习。错误处理良好的错误处理机制可以让用户及时得到提醒。tyr-catch 语句它是作为 JavaScript 处理异常的一种标准方式。基本语法如下：try{...

2018-03-25 23:39:27 187

原创第 16 、HTML5 脚本编程

目录目录跨文档信息传递原生拖放媒体元素历史状态管理小结跨文档信息传递跨文档消息传送（cross-document messaging），有时候简称为XDM，指的是在来自不同域的页面间传递消息。 XDM的核心是 postMessage()方法。在 HTML5规范中，除了 XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的：向另一个地方传...

2018-03-25 22:56:41 307

原创 HTTP 首部03

目录目录请求首部字段响应首部字段实体首部字段为 Cookie 服务的首部字段Set-CookieCookie请求首部字段响应首部字段实体首部字段上面三部分在 HTTP 首部01 中都有列举，我们要介绍的是下面这个。为 Cookie 服务的首部字段管理服务器与客户端之间状态的 Cookie ，在 Web 网站方面广泛应用。 Coo...

2018-03-25 02:04:30 176

原创第 15 章、Canvas

目录目录基本用法2D 上下文小结HTML5添加的受欢迎的功能就是元素。基本用法要使用元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。下面就是元素的例子。 <canvas id="drawing" width=" 200" height="200">A drawing of something.<...

2018-03-23 16:55:11 147

原创第八节、HTTP 首部02

目录目录通用首部字段Cache-Control可缓存性到期重新验证和重新加载其他ConnectionDatePragmaTrailerTransfer-EncodingUpgradeViawarning通用首部字段指请求报文和响应报文都会用到的首部。Cache-Control通过该指令，能操作缓存的工作机制。指令的参数...

2018-03-23 00:10:20 184

原创第七节、HTTP 首部01

HTTP 协议的请求和响应报文中必定包含HTTP首部。1、HTTP 报文首部报文首部：在客户端和服务器处理时起至关重要作用的信息几乎都在这边。报文主体：所需要的用户和资源的信息都在这边。2、HTTP 首部字段HTTP首部字段传递传递重要信息（使用首部字段是为了给浏览器和服务器提供报文主体大小、所使用的语言、认证信息等）HTTP 首部字段结构（由首部字段名和字段值构成，中间用冒号“”...

2018-03-22 22:59:59 150

原创第 14 章、表单脚本

目录目录表单基础知识文本框脚本小结表单基础知识在 HTML 中，表单是由元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLForm- Element 类型。提交表单用户单击提交按钮或图像按钮时，就会提交表单。使用或都可以定义提交按钮，只要将其 type 特性的值设置为”submit”即可，而图像按钮则是通过将的 type 特...

2018-03-22 17:03:15 191

转载第 10 节、路由：prompt 用法讲解

在很多网站应用中，当你想离开页面时都会弹出一个提示框（alert），让你选择是否残忍离开。React路由也为我们准备了这样的组件，就是prompt。标签要使用标签先要用import进行引入，我们在Jscomponentb.js里引入。import React from "react";import {Prompt} from "react-router-dom";expo...

2018-03-22 14:56:50 1625

转载第 09 节、路由：Router 中的属性和路由模式

目录目录basename属性forceRefresh属性5中路由方式现在我们已经掌握了React路由导航的基本方法，这节学习一下标签上的属性和用法。这节还有一个重点就是路由的5种模式。basename属性basename的作用是我们增加一级导航目录，比如以前的导航目录是：http://localhost:1717/Jscomponentb 现在想访问同一...

2018-03-22 14:16:25 1587

转载第08节、路由：通过路由传值的方法

目录目录最常见的传值多参数传值在开发中路由之间的传值是必不可少的，虽然React有更优雅的方式。最常见的传值传值是比较简单的。在传值时，主要依靠props进行接收。路由和页面之间的传值也很类似。代码还是接着上节进行编写。先在nav.js页面传送值，看下面的代码，传送的值为ILoveWeb。<NavLink to="/Jscomponentc/...

2018-03-22 11:28:22 659

原创第13章、事件

目录目录事件流事件处理程序事件对象事件类型内存和性能事件流 - 事件冒泡即事件开始时由具体的元素（文档中嵌套层次深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件，而具体的节点应该后接收到事件。DOM 事件流“DOM2级事件”规定的事件流包括三个阶...

2018-03-22 00:23:04 158

转载 markdown语法

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I...

2018-03-21 16:11:13 120

项目中都要设置 404 页面，也就是当找不到这个路由时跳转的页面。React 中的404主要靠 Switch 组件来完成。Switch组件的使用在index.js页面中，在引入路由的地方，我们加入Switch的引入。1import {BrowserRouter as Router , Route , Switch} from 'react-router-dom';编写404页面现在需要一个统一的4...

2018-03-21 14:02:32 1902

转载第06节、路由：NavLink中的常用选项

上一节，初步使用了 React 路由。这节是针对 NavLink 标签上的选项。Route和NavLink的exact选项上一节中，代码中有一个 exact 选项。这个是精确匹配使用，一般而言React会匹配所有能匹配的路由组阶，exact可以使我们的匹配更精确。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。123 <Route path="/" comp...

2018-03-21 11:04:01 8484

原创第11章、DOM扩展

1、选择符 API 方法内容 querySelector（）接收第一个 css 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素，返回 null 。querySelectorAll（）返回的是一个 NodeList 的实例。matc...

2018-03-20 17:52:01 164

转载第05节、路由：Hello React路由

由在开发中时刻都会用到，它是SPA（单页应用）的基础，可以说不会路由系统基本就无法用React进行编程。其实路由可以简单的看作我们平时访问的网址或者路径，这样看有助于你的理解，但是并不正确。Router包安装:安装包还是要打开命令行工具，使用npm来进行安装。1npm install --save react-router react-router-domreact-router：是基本的rout...

2018-03-20 15:14:43 206

转载第04节、构建：webpack一步一步构建02

上节已经对webpack进行了基本配置，而且已经能打包到页面中了，这节主要针对我们的ES6和React进行配置。在学习之前，请保证你上节的内容已经配置完成，如果你没有配置完成，这节将不能继续下去。Babel安装配置在webpack中配置Babel需要先加入babel-loader，这里我们继续使用npm来进行安装，但是我们一般还需要支持es2015和React，所以要安装四个包。1cnpm ins...

2018-03-20 11:20:40 181

转载第03节、webpack构建项目01

如果你对webpack很精通，完全可以自己随心所欲的用webpack自己构建一个React的开发环境,这节从头开始自己构建一个简单的React开发环境。这节课开始之前，你要会基本的webpack的开发。在安装webpack之前，先建立一个文件夹并进入（我这里使用cmd命令了）12mkdir react-webpackcd react-webpack进入文件夹后对我们的webpack项目进行初始化，...

2018-03-19 20:26:20 345

转载第02节、构建：generator-react-webpack

最近公司又开始了新的项目，所以博客更新会不那么及时，另外晚上回家还在看 HTTP 相关的知识，整理的都是相关的东西。React当然还会继续更新。好了，废话不多说。react的生态圈非常庞大，第三方的构建工具也有很多种，这节介绍一个在业内比较流行的构建工具generator-react-webpack，它是需要yeoman的支持的。优点介绍：基于webpack构建，可以很容易的配置自己需要的webp...

2018-03-16 16:34:15 742 1

原创第六节、与 HTTP 协作的 Web 服务器

一台Web服务器可搭建多个独立的 Web 网站，也可作为通信路径上的中转服务器提升传输效率。1、用单台虚拟主机实现多个域名2、通信数据转发程序：代理、网关、隧道代理（代理服务器基本行为就是接收客户端发送的请求后转发给其他服务器，代理不改变请求 URI ，会直接发送给前方持有资源的目标服务器。每次通过代理服务器转发请求或响应时，会追加写入Via首部信息） ...

2018-03-15 23:59:21 165

原创第五节、返回结果的 HTTP 状态码

HTTP 状态码负责表示客户端 HTTP 请求的返回结果、标记服务器端的处理是否正常、通知出现的错误等工作。1、状态码告知从服务器端返回的请求结果状态码的类别HTTP状态码分类分类分类描述1**信息，服务器收到请求，需要请求者继续执行操作2**成功，操作被成功接收并处理3**重定向，需要进一步的操作以完成请求4**客户端错误，请求包含语法错误或无法完成请求5**服务器错误，服务器在处理请求的过程中...

2018-03-14 23:43:28 220

原创完整的Gulp安装及文件配置

什么是Gulp？ gulp.js是基于流的自动化构建工具。前置知识需求：node.js的一些基础用法npm的基础用法，如init、install、run等了解gulp.js的Api（内容很少，掌握五个Api就可以了）安装gulp的步骤流程： 1、新建项目文件夹（例如D盘下新建hbPage文件夹），启用cmd 2、进入项目文件，全局安装Gulp npm install -g ...

2018-03-14 15:40:53 3831

原创第四节、HTTP报文内的HTTP信息

HTTP通信过程包括从客户端发往服务器的请求及从服务器端返回客户端的响应。1、HTTP报文请求端（客户端）的HTTP报文叫请求报文，响应端（服务器端）的叫响应报文。 HTTP报文大致分为报文首部和报文主体两块。当然，并不一定要有报文主体。报文首部：服务器或客户端需处理的请求或响应的内容及属性。报文主体：应被发送的数据。2、请求报文及响应报文的结构 ...

2018-03-14 00:18:21 182

原创第三节、简单的HTTP协议

这节主要针对HTTP协议结构进行讲解，主要使用HTTP/1.1版本。1、HTTP协议用于客户端和服务器之间的通信应用HTTP协议时，必定有一端担任客户端角色，另一端担任服务端角色2、通过请求和响应的交换达成通信请求必定由客户端发出，而服务器端回复响应我们来模拟一个请求和响应发送请求 ...

2018-03-13 00:55:25 200

转载第01节、create-react-app快速脚手架

它的官网：https://github.com/facebookincubator/create-react-appcreat-react-app优点无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手开发项目。高集成性：集成了对React，JSX，ES6和Flow的支持。自带服务：集成了开发服务器，你可以实现开发预览一体化。热更新：保存自动更新，让你的开发更简单。全兼容性：自动处理...

2018-03-12 09:22:44 379

转载 React表单应用--不可控组件

在input标签中不把value绑定到state上的就是不可控组件，它的数据不合state对应，所以在开发时会给自己挖很多坑，但是不可控组件并不是不可掌控。先来做一个最简单的不可用组件。render:function () { return ( <div> <input type="text"/> </div> ...

2018-03-09 15:06:55 235

转载 React表单应用--可控组件

可控组件和不可控组件：在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件，反之则是不可控组件。可控组件：在render()函数中设置了value的<input>是一个功能受限的组件，渲染出来的HTML元素始终...

2018-03-09 14:58:41 346

转载 React表单应用--表单name复用

name复用方式直接读取表单的属性值，比bind写法少一个参数（React中事件响应函数会自动绑定this）。其原理是在所有的标签中设置统一的name属性，并将这个属性值对应为state属性，在事件响应函数中通过读取表单的name值获得state属性，从event.target.value获取用户输入的值（check控件稍有不同），要求所有相关的标签（包括input标签）都要统一设置name属性。...

2018-03-08 11:28:50 1221

转载 React表单应用--事件响应和bind复用

事件响应表单组件可以通过设置onChange（）回调函数来监听组件变化。当用户的交互行为导致变化时，onChange（）被执行并通过浏览器做出响应。用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取。<input>或<textarea>的value发生变化。<input>的checked状态改变。<option>的se...

2018-03-08 11:17:32 423

转载第10节、获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存中的一种数据结构，叫做虚拟 DOM 。只有当他插入文档以后，才会变成真实的 DOM。根据React设计，所有的 DOM 变动，都现在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实的 DOM 上，这种算法叫做 DOM diff ，他可以极大提高网页的性能表现。但是，有时候需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。&...

2018-03-07 15:56:37 348

转载第09节、React组件：props属性验证--PropTypes

组件的属性可以接受任意值，字符串、对象、数组、函数等等。有时候我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会...

2018-03-07 15:40:57 557

转载第08节、React组件：this.props.children

this.props对象的属性与组件的属性一一对应，但有一个例外，就是this.props.children属性。他表示组件的所有子节点。子节点组件经常会写入很多子属性，这种子属性的需求，就要用到this.props.children属性。<!DOCTYPE html><html lang="en"><head> <meta charset="...

2018-03-07 15:14:33 686

转载第07节、React组件小实例

生命周期实例这个案例是自定义一个组件，并把组件进行不断闪烁，形成一种动画形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

2018-03-07 11:43:50 154

转载第06节、React组件：生命周期

一个组件完整的生命周期包含实例化阶段、活动阶段、销毁阶段三个阶段。每个阶段又由相应的方法管理。过程中涉及三个主要的动作术语：mounting:表示正在挂接虚拟DOM到真实DOM。updating:表示正在被重新渲染。unmounting:表示正在将虚拟DOM移除真实DOM。每个动作术语提供两个函数：componentWillMounte()componentDidMount()componentW...

2018-03-06 18:21:48 120

转载第05节、React组件：props和render成员

props是组件固有属性的集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的。属性的初识值通常由React.createElement函数或者JSX中标签的属性值进行传递，并合并到组件实例对象的this.props中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...

2018-03-06 17:47:07 181

转载第04节、React组件：state成员

前边的代码中我们初步认识了组件，接下来具体学习React组件的作用，React组件可以看成是带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。state成员组件总是需要和用户互动的。React的一大创新，就是将界面组件看成一个状态机，用户界面拥有不同状态并根据状态进行渲染输出，用户界面和数据始终保持一致。开发者的主要工作就是定义state，并根据不同的state渲染对应...

2018-03-06 17:18:24 167

转载第03节、进阶JSX语法

JSX上的数组输出使用JSX输出数组是有一些小坑需要迈过的，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

2018-03-06 16:59:33 166

转载第02节、初识JSX语法

JSX即JavaScript XML，它使用XML标记来创建虚拟DOM和声明组件。加入JSX语法支持如果要使用JSX语法支持，你可以使用Babel进行转换，这里使用Babel的核心文件browser.js。你可以去网上提供的静态资源库引用（http://www.bootcdn.cn/），也可以自己下载。但是在实际项目开发过程中，我们在代码中不是直接引入该js文件的，而是使用它把代码转换成静态文件之...

2018-03-06 16:36:37 172

空空如也

空空如也