05-Vue的举例：列表功能
列表功能举例步骤 1：列表功能完整的代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .table { width: 800px; margin: 20px auto; border-collapse: collapse; /*这一行，不能少：表格的两边 ...
06-自定义过滤器：时间格式化举例
前言
我们接着上一篇文章01-04来讲。
过滤器的概念概念：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。
Vue1.X中的系统过滤器Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。
系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。
系统过滤器的使用，可以参考参考文档：http://v1-cn.vuejs.org/api/#过滤器
Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。
自定义全局过滤器文档地址：http://v1-cn.vuejs.org/guide/custom-filter.html
全局过滤器的基本使用我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称 、过滤器函数。
比如说，我 ...
07-自定义按键修饰符&自定义指令
v-on的按键修饰符Vue 内置的按键修饰符通俗一点讲，指的是：监听键盘输入的事件。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。如下：
Vue内置的按键修饰符：
.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right1.0.8+版本：支持单字母的按键别名。
比如说，keyup指的是：键盘（任何键位）抬起时的监听事件。.enter指的是：按enter键的按键修饰符。我们把这两个结合起来看看。
@keyup.enter举例：按enter键后的监听事件
@keyup.enter="addData"表示：按住enter键后，执行addData()方法。全称是v-on:key.enter="addData"。
我们还是拿01-04这篇文章中的列表功能来举例。之前是点击“添加”按钮后，列表中会添加一个item。现在要求：在输入框中按enter键后，也能添加一个item。
核心代码如下：
<input type="text" v-model= ...
08-Vue实例的生命周期函数
介绍
vue实例的生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子：就是生命周期事件的别名而已。
生命周期钩子 = 生命周期函数 = 生命周期事件。
生命周期函数的主要分类
根据上面这张图，我们把生命周期函数主要分为三类。
1、创建期间的生命周期函数
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）
举例：
<!DOCTYPE html><html lang="en"><head> <meta charset="U ...
09-Vue中的Ajax请求
vue-resource的介绍vue-resource是Vue高度集成的第三方包。
官网链接：
文档（http相关）：https://github.com/pagekit/vue-resource/blob/master/docs/http.md
vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。
解释：
vue.js文件向Windows对象暴露了Vue这个关键词；vue-resource.js向Vue身上挂载了this.$http这个属性。于是，我们可以直接写this.$http.get或者this.$http.post或者this.$http.jsonp来调用。
vue-resource 发送Ajax请求常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。
get 请求格式举例：
this.$http.get(url) .then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数 console.l ...
10-Vue动画
前言动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
使用过渡类名实现动画官方文档的截图过渡类名如下：
动画进入：
v-enter：动画进入之前的初始状态
v-enter-to：动画进入之后的结束状态
v-enter-active：动画进入的时间段
PS：第一、第二个是时间点；第三个是时间段。
动画离开：
v-leave：动画离开之前的初始状态
v-leave-to：动画离开之后的结束状态
v-leave-active：动画离开的时间段
PS：第一、第二个是时间点；第三个是时间段。
使用举例（通过Vue的过渡类名来实现）v-enter-to和v-leave的状态是一样的。而且一般来说，v-enter和v-leave-to的状态也是一致的。所以，我们可以把这四个状态写成两组。
现在我们来做个例子：点击按钮时，让div显示/隐藏。
1、引入：
如果我们不使用动画，应该是这样做：
<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
00-服务器分类及PHP入门
title: 00-服务器分类及PHP入门publish: true
C/S架构和B/S架构C/S架构是Client/Server这两个单词的首字母，指的是客户端，服务器。
优点:
性能较高：可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可。
界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果。
缺点:
更新软件：如果有新的功能，就要推出新的版本。
不同设备访问：如果使用其他的电脑，没有安装客户端的话就无法登陆软件。
B/S架构是Browser/Server的这两个单词的首字母。指的是浏览器、服务器，是WEB兴起之后的一种架构。
现在所有的网站都是B/S架构，较为常见的例子有百度、知乎、网易云音乐Web等等，只需要通过浏览器即可使用.
优点：
更新简洁：如果需要更新内容了,对开发人员而言需要更改服务器的内容，对用户而言只需要刷新浏览器即可。
多设备同步：所有数据都在网上,只要能够使用浏览器即可登录使用。
缺点:
性能较低：相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。
浏览器兼容：处理低版本的浏览器显示问题 ...
00-编程语言
title: 00-编程语言publish: true
编程语言编程编程：让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们如果要控制计算机，则需要通过计算机语言向计算机发出命令。
计算机语言计算机语言：人与计算机之间通讯的语言。它是人与计算机之间传递信息的媒介，是用来控制计算机的一系列指令。
计算机语言的种类非常的多，总的来说可以分成三大类：机器语言、汇编语言和高级语言。
计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。
编程语言通过类似于人类语言的 ”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言。不同的编程语言，有不同的语法，必须遵守。
如今通用的编程语言有两种形式：汇编语言和高级语言。
汇编语言：与机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言：主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言 ...
01-ES6的介绍和环境配置
title: 01-ES6的介绍和环境配置publish: true
前言ECMAScript 简介ES 的全称是 ECMAScript，它是由 ECMA 国际标准化组织 制定的一套脚本语言的标准化规范。
详细来说，ES 是由 ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等公司。
PS：简单来说，ECMAScript 是 JS 的语言标准。当然，ECMAScript 还包括其他脚本语言的语言标准。
ECMAScript 版本发布记录
1995 年：ECMAScript 诞生。
1997 年：ECMAScript 标准确立。ECMA 发布 ECMA-262 标准，推出浏览器标准语言 ECMAScript 1.0。
1999 年：发布 ES3；与此同时，IE5 风靡一时。
2009 年：发布 ECMAScript 5.0（简称 ES5）。例如 foreach、Object.keys、Object.create ...
01-JS简介
title: 01-JS简介publish: true
JavaScript背景Web前端有三层：
HTML：从语义的角度，描述页面结构
CSS：从审美的角度，描述样式（美化页面）
JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制）
发展历史JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。
JavaScript是由网景公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，因市场宣传需要，改名为 JavaScript。
JavaScript是Sun注册并授权给Netscape使用的商标。后来 Sun 公司 被Oracle收购，JavaScript版权归Oracle所有。
备注：由于 Sun 公司当时的Java 语言特别火，所以为了傍大牌，就借势改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同时期还有其他的网页语言，比如VBScript、JScrip ...
01-var、let、const的区别
title: 01-var、let、const的区别publish: true
var、let、const 的区别1、var 声明的变量会挂载在 window 对象上，而 let 和 const 声明的变量不会举例：
var a = '我是a';console.log(a); // 打印结果：我是aconsole.log(window.a); // 打印结果：我是a
let b = '我是b';console.log(b); // 打印结果：我是bconsole.log(window.b); // 打印结果：undefined
let c = '我是c';console.log(c); // 打印结果：我是cconsole.log(window.b); // 打印结果：undefined
var 的这一特性，会造成 window 全局变量的污染。举例如下：
var innerHeight = 100;console.log(window.innerHeight); // 打印结果：永远都是100 ==> 会覆 ...
01-单线程和异步
title: 01-单线程和异步publish: true
单线程JavaScript 语言和执行环境是单线程。即同一时间，只能处理一个任务。
具体来说，所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个。所有的任务都需要排队。
JS 为何要被设计为单线程呢？原因如下：
首先是历史原因，在最初设计 JS 这门语言时，多进程、多线程的架构并不流行，硬件支持并不好。
其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。
而且，如果多个线程同时操作同一个 DOM，在多线程不加锁的情况下，会产生冲突，最终会导致 DOM 渲染的结果不符预期。
所以，为了避免这些复杂问题的出现，JS 被设计成了单线程语言。
同步任务和异步任务定义如果当前正在执行的任务执行完成前，它就会阻塞其他正在排队的任务。为了解决这个问题，JS 在设计之初，将任务分成了两类：同步任务、异步任务。
同步任务：在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
异步 ...
02-Ajax入门和发送http请求
title: 02-Ajax入门和发送http请求publish: true
同步和异步回顾同步和异步的简单理解
同步：必须等待前面的任务完成，才能继续后面的任务。
异步：不受当前任务的影响。
拿排队举例：
同步：在银行排队时，只有等到你了，才能够去处理业务。
异步：在排队的时候，可以玩手机。
异步更新网站我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。
可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并不会整体刷新。
试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要重新刷新，体验就太糟糕了。
web 前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。
关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript 基础：异步编程和 Ajax/01-单线程和异步》
AjaxAjax 的概念 ...
02-ES5中的严格模式
title: 02-ES5中的严格模式publish: true
ES的几个重要版本
ES5 : 09年发布。
ES6(ES2015) : 2015年发布，也称为ECMA2015。
ES7(ES2016) : 2016年发布，也称为ECMA2016 (变化不大)。
严格模式的理解概念理解：除了正常运行模式(混杂模式)，ES5添加了第二种运行模式：”严格模式”（strict mode）。
顾名思义，这种模式使得Javascript在更严格的语法条件下运行。
目的：
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，为代码的安全运行保驾护航
为未来新版本的Javascript做好铺垫
使用
针对整个脚本文件：将use strict放在脚本文件的第一行，则整个脚本文件将以严格模式运行。
针对单个函数：将use strict放在函数体的第一行，则整个函数以严格模式运行。
PS：如果浏览器不支持，则这句话只解析为一条简单的语句, 没有任何副作用。
脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法 ...
02-变量
title: 02-变量publish: true
字面量：数字和字符串“字面量”即常量，是固定值，不可改变。看见什么，它就是什么。
字面量有3种：
数字
字符串
布尔字面量
（1）数值的字面量非常简单，写上去就行，不需要任何的符号。例如：
alert(886); //886是数字，所以不需要加引号。
（2）字符串的字面量也很简单，但一定要加上引号。可以是单词、句子等。例如：
console.log('886');console.log('千古壹号，永不止步');
温馨提示：100是数字，”100”是字符串。
（3）布尔字面量举例：
if (true) { console.log('如果为真，就走这里面的代码);}
总结字面量都可以直接使用，但是我们一般不会直接使用字面量。
如果直接使用字面量的话，比较麻烦。比如说，多个地方要用到同一个字面量，还不如事先定义一个变量，用来保存字面量。
变量更方便我们使用，所以在开发中都是通过变量去保存一个字面量，而不会直接使用字面量。
变量的概念变量：是用于存放 ...
