2017年05月_玉儿Qi

原创 Vue.js 进阶(1) -- 响应式原理

在Vue中，其实Model(模型层)只是普通的JavaScript对象，修改Model，则会更新相应的View(视图)。这种机制让状态管理变得简单，这一章我们就来一起学习它的工作原理。追踪变化1、属性变化的追踪当我们定义一个新的vue实例的时候，会把所有实例的属性放在data选项下：var data = { a: 1 }var vm = new Vue({ data: data})这时，Vu

2017-05-26 13:52:34 585

原创 Vue.js 学习(9) -- 组件2

动态组件组件在声明后，可以在任意地方挂载和卸载：使用Vue保留的元素compoment的is特性可以挂载组件，当有多个组件的时候，还可以来回切换。不看代码说清楚比较费劲，下面是栗子：<component v-bind:is="currentView"> </component>var vm = new Vue({ el:

2017-05-26 10:39:53 250

原创 Vue.js 学习(9) -- 组件1

终于等到组件。组件是Vue最强大的功能之一，它可以提供一层封装，将一些自定义的功能打包，以供开发者在后续的代码中使用。使用组件的基本格式组件可以在全局范围内注册，也可以仅在另一个实例或组件中注册，下面我们先来介绍在全局范围内注册组件：全局组件Vue.component('my-component', { // 选项}) PS：对于组件的标签名（在上面这个栗子中是my-component），

2017-05-24 16:51:23 384

原创 Vue.js 学习(8) -- v-model: 表单控件绑定

基础v-model可以在表单控件元素（例如input）上创建双向数据绑定：代码修改v-model后的变量值，那么控件的值也会随之改变；控件的值被用户修改，v-model绑定的变量也会被改变。其实，v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。几个最简单的栗子：input:<input v-model="message" placehol

2017-05-23 16:57:12 528

原创 Vue.js 学习(7) -- 事件处理

本节重点讲的是事件绑定指令v-on，下面是一个最简单的栗子，被运行的代码直接跟在指令后面。<div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p></div>var example1 = new Vue({ el: '#example-1',

2017-05-23 15:58:35 510

原创 Vue.js 学习(6) -- Vue指令之：列表渲染

本节的重点内容是v-for指令。v-for指令将根据指令后的数据，循环的对DOM元素进行渲染。

2017-05-23 11:19:07 388

原创 Vue.js 学习(6) -- Vue指令之：条件渲染

本节的重点是几个Vue指令：v-ifv-elsev-else-ifv-show它们共同的特点，就是都会根据条件，对DOM元素进行渲染。v-if<h1 v-if="ok">Yes</h1>h1会被渲染当且仅当ok = true。v-else可以为v-if后添加一个v-else：<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>这样，如果ok为true，则渲染第一个

2017-05-23 10:26:02 420

原创 Vue.js 学习(5) -- Class 与 Style 的增强功能

我们已经知道，可以使用v-bind来为html元素设置属性。于此同时，Vue.js 专门增强了指令v-bind，来设置html元素的属性class和style。HTML class（待续）

2017-05-22 17:20:11 228

原创 Vue.js 学习(4) -- 计算属性和Watchers

上一节我们知道了，在大括号插值和v-bind指令中，我们可以使用表达式。但是，如果表达式的逻辑太多、或者使用次数很多的时候，会让代码难以维护，使用模版的代码反而不再简单和清晰。这种情况下，与其使用复杂逻辑的模版，我们应该使用计算属性。栗子<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed revers

2017-05-22 14:27:22 360

原创 Vue.js 学习(3) -- 语法基础

插值1、文本插值：使用双大括号绑定数据，这种语法称为“Mustache”：<span>Message: {{ msg }}</span>双括号表示的就是一个文本插值。其中，msg是数据对象的属性，例如像下面这样：var app = new Vue({ el: '#vueApp', data: { msg: 'Hello VueJS!' }})只要对象的属性msg发生了变化，文本

2017-05-22 12:51:39 573

原创 Vue.js 学习(2) -- Vue实例

Vue.js都是通过new Vue…创建一个Vue的根实例来开始运行的，上一节我们已经看到了很多这样格式的栗子：var vm = new Vue({ // ...我的代码,这里其实是传入了一个开发者定义的对象,这里暂时命名为setting。})在setting中，可以定义我们需要的数据、模板、挂载元素、方法、生命周期等选项。data&属性：Vue实例，也就是上文的vm，会代理起data对象中的

2017-05-19 17:06:19 595

原创 Vue.js 学习(1) -- 初步了解

Vuejs的目标：实现响应的数据绑定，和组合的视图组件。响应式数据绑定什么是响应的数据绑定？就是将数据和元素关联起来，当数据变化的时候，元素也会做响应式的变化，例如：// html<div id="vueApp"> {{ message }}</div>var app = new Vue({ el: '#vueApp', data: { message: 'Hello V

2017-05-19 16:19:53 579

原创 React实践：ReactBasicImgViewer

实现的功能：在点击按钮，显示图片，如图所示：代码还在不断的完善和更新中，代码详见：https://github.com/EmilyQiRabbit/ReactBasicPicturesViewer核心代码（HTML文件中body标签内代码）： <body> <h1>Basic Example</h1> <div id="viewerContainer"></div> <script

2017-05-15 09:32:00 357

原创 jQuery插件layer扩展：解决大图显示时，图片的比例问题

代码详见：https://github.com/EmilyQiRabbit/layerExtensionhtml核心：<div class="carimgtd"> <div style="height:200px"> <img src="img/testH.jpg" alt="测试高图片"> </div> <button class="btn btn-blue

2017-05-11 17:22:25 4264 2

原创 ES6 -- 新的数据结构：Set和Map

SetSet是和数组类似的数据结构，但是Set中，所有的成员值都是唯一的，也就是，没有重复值。创建一个Set可以使用new Set()方法：const set = new Set();然后，可以通过add()方法向set中添加成员。set.add(1);如果在add过程中，添加了重复的成员，那么该成员将会被忽略。另外，也可以直接向Set()中传递一个（类）数组作为参数来初始化一个新的set对象。

2017-05-10 17:20:21 445

原创 ES6 -- 遍历器Iterator和for...of

基本概念对于数组的访问我们可以使用for(var i=0;i<len;i++){...}循环，对于Object对象我们可以使用for...in遍历所有的键值对。在ES6中，还提供了Map和Set数据结构。那么，有没有那么一种统一的接口机制，让我们可以对不同的数据结构都可以进行访问呢？答案就是Iterator，遍历器。它可以为不同的数据结构提供统一的访问机制：任何一种数据结构，只要部署了Iterato

2017-05-10 16:49:15 1350

原创 ES6 -- Proxy搭档：Reflect

Reflect对象的主要功能：1、作为Object对象的优化：1) 将Object对象上的一些明显属于语言内部的方法放到Reflect上。例如：Object.defineProperty等。 2) 修改那些不合理的Object方法的返回结果。例如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.definePr

2017-05-09 13:59:07 252

原创 ES6 -- 最佳代理Proxy：实例方法

get方法该方法用来代理属性的读取操作。当用户希望访问对象的某个属性时，会直接触发这个方法，而不是默认的读取属性方法。栗子：var car = { brank: "Benz"};var proxy = new Proxy(car, { get: function(target, property) { if (property in target) {

2017-05-09 13:22:00 1692 1

原创 ES6 -- 最佳代理：Proxy

Proxy可以修改对象的默认行为，例如，如果为某个对象设置了包含有get方法的Proxy对象，那么当访问对象的值的时候，要首先经过这个get方法。这样，开发者获得了对象代理的权限和方式；他人对于对象的访问，将是受到开发者的限制和控制的。栗子：var proxyObj = new Proxy({}, { get: function (target, key, receiver) { con

2017-05-05 17:19:08 289

原创 ES6 -- 异步编程神器2：Generator

Generator是ES6提供的一种全新的异步编程方案，它的基本语法如下：function* myFirstBasicGenerator() { yield 'hello'; yield 'world'; return 'ending';}var mfb = myFirstBasicGenerator();我们可以注意到几点特别之处：1、使用function*来声明函数； 2、函数体

2017-05-05 15:43:29 330

原创 ES6 -- 异步编程神器：Promise对象

Promise是一种异步编程的解决方案，比起传统的回调函数方式，Promise要更合理和强大。基本调用方式下面直接给出代码，通过代码对Promise对象进行讲解和分析：构造一个Promise实例的模版代码：var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ r

2017-05-05 15:12:00 554

原创 CSS 动画：animation和transition

animationanimation使用时必须配合@keyframes<!DOCTYPE html><html><head> <style> div { width:100px; height:100px; background:red; position:

2017-05-04 17:28:08 312

原创前端基础 -- HTTP协议简述

HTTP（超文本传输协议）是一个基于TCP/IP通信协议的、无状态的、应用层协议，它简洁、快速，且适用于分布式超媒体信息系统。HTTP协议的主要特点包括： 1、简单快速：客户向服务器请求服务时，只需要传送请求方法和路径。请求方法例如：GET，HEAD，POST。更多请求方法： GET—–请求指定的页面信息，并返回实体主体。 HEAD—–类似于get请求，只不过返回的响应中没有具

2017-05-04 16:30:25 405

原创 React -- 事件系统

React 中的虚拟DOM是在内存中以对象的形式存在的，因此，在对象上添加事件，就会非常容易。React给予Virtual DOM实现了一个SyntheticEvent合成事件层，我们所定义的事件处理器会接收到一个SyntheticEvent对象的实例。合成事件的绑定方式React事件绑定方式在写法上与原生的HTML事件监听器的属性非常相似，并且含义和处罚的场景也都一致。例如：<button onC

2017-05-03 17:16:12 397

原创 React -- 组件生命周期

React的生命周期分为挂载、渲染和卸载三个阶段。这三个阶段分为两类： 1、组件在挂载或卸载时 2、组件接受新的数据时，即组件更新渲染时卸载和挂载1、组件的挂载class App extends Component { static propTypes = { // ... }; static defaultProps = { // .

2017-05-03 15:03:54 253

原创 React -- 数据流

在React中，数据是从父组件到子组件流动的，这条原则可以让我们只需要在父组件上操作，然后子组件就会自动更新并渲染。这一节有两个很重要的概念：React组件的state和props。如果初始化父组件的props，那么React就会向下遍历组件树，尝试渲染相关的子组件；而state则只涉及组件自己内部的状态，这些状态不会干扰到组件的父／子节点，仅和组件自身有关。state内置方法setState：

2017-05-02 17:21:51 371

YuqiRealm.com