函数详解：

• 创建期间的生命周期函数

  • beforeCreate()表示的是实例创建之前就会调用改方法，在执行此函数的时候，data和methods中的数据还没有初始化。
  • created()在执行此方法的时候，data和methods中的数据已经初始化，所以，这里是最早可以调用methods里面的方法，和处理data中的数据的地方。
  • beforeMount()此时模板已经在内存中编辑完成了，但是还没有渲染到页面中。此时页面中的元素还没有真正的替换过来吗，还只是模板中的字符串。
  • mounted()内存中的模板已经挂载到了页面中了。用户已经可以看到渲染好的页面了。 mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例在内存中就不会在改变了。

• 运行期间的生命周期函数

  • beforeUpdate()在执行此方法的时候，页面中的数据还没有发生改变，但是data中的数据已经发生了改变。
  • updated()页面中的数据和data中的数据全部是最新的了。

• 销毁期间的生命周期函数：

  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

过滤器语法：Vue.filter('过滤器的名称', function(){})
过滤器中的 function ，第一个参数已经固定，永远都是过滤器管道符前面传递过来的数据。

私有过滤器

定义私有过滤器过滤器有两个条件：过滤器名称和处理函数
定义：

filters: {
  capitalize: function (value) {
    //函数体
  }
}

调用：
过滤器调用时候的格式 ：{{ name | 过滤器1的名称| 过滤器2的名称 }}

<td>{{item.ctime | capitalize(value)}}</td>

全局过滤器

在创建 Vue 实例之前全局定义过滤器
定义

Vue.filter('capitalize', function (value) {
 //函数体
})

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

简介

vue在小编看来就是一个很流行，很火的前端框架之一。那么官方怎么说的呢，我们一起看看：Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
说了这么多，小编还是不懂。不过接下来小编整理了一些经常用的东东。希望有所帮助。

使用

1. 引入：首先引入你的vue.js.当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数。

2. 使用：当 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者。Vue 实例所控制的这个元素区域，就是MVVM的 V。
   示例：

   <div id="app">
    <p>{{ msg }}</p>
   </div>
   
   <script>
    var vm = new Vue({
        el:'#app',// 表示当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
        data:{// data 属性中，存放的是 el 中要用到的数据
            msg:'Hello World'
        }
    })
   </script>

   常用指令

3. {{}}插值表达式。
4. v-cloak解决未编译时期，显示未编译的代码，能够解决插值表达式闪烁的问题。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
5. v-text它会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。而且v-text没有闪烁问题。
6. v-html和 v-text类似，但是v-html可以把html解析，然而v-text会把所有的值以字符串的形式输出，包括html。
7. v-bind:简写为: 是 Vue中，提供的用于绑定属性的指令。可以写合法的JS表达式.
8. v-on: 简写为：@事件绑定机制。为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了
9. v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定.v-model 只能运用在表单元素中。而v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定。

事件修饰符

• .stop 阻止冒泡。
• .prevent 阻止默认行为。
• .capture 实现捕获触发事件的机制。添加事件侦听器时使用事件捕获模式。
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调。.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为。
• .once 只触发一次事件处理函数。

在Vue中使用样式

使用class样式

这些样式都需要使用v-bind做数据绑定.

• 数组

   <h1 :class="['top','res']">我是h1</h1>

• 三元表达式

  <h1 :class="['top','res', isactive?'active':'']">我是h1</h1>

• 对象

  • 数组中的对象

    <h1 :class="['top','res', {'active': isactive}]">我是h1</h1>

  • 对象

  <h1 :class="{red:true, italic:true, active:true, thin:true}">我是h1</h1>

  注意：在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号； 属性的值是一个标识符。

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象

    <h1 :style="{color: 'red', 'font-size': '40px'}">我是h1</h1>

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

      <h1 :style="[ styleObj1, styleObj2 ]">我是h1</h1>
      <h1 :style="styleObj1">这是一个h1</h1>

   在data上定义样式：

    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px' },
            styleObj2: { 'font-style': 'italic' }
    }

   v-for、v-if、v-show

v-for

• 迭代数组

  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>

• 迭代对象中的属性

  <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

• 迭代数字

  <p v-for="i in 10">这是第 {{i}} 个P标签</p>

  注意：2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的而且只接受 string / number数据类型。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

   <p v-for="item in list" :key="item.id">
    <input type="checkbox">{{item.id}} --- {{item.name}}
   </p>

  v-if、v-show

• v-if 的特点：每次都会重新删除或创建元素,有较高的切换性能消耗.
• v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式,有较高的初始渲染消耗.
• 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show,如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if 。

第一步：安装

npm install --save art-template
npm install --save express-art-template

第二步：指定.html使用的解析引擎(官方给出的是art，自己开心就好）

app.engine('html', require('express-art-template'))

第三步：使用模板进行传值

app.get('/', function (req, res) {
    res.render('index.art', {
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

附录：官方示例

var express = require('express');
var app = express();
app.engine('art', require('express-art-template'));
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});

app.get('/', function (req, res) {
    res.render('index.art', {
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

常用命令

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，只要你安装了node就已经安装了npm，你可以通过npm --version来查看自己是否安装了npm，如果显示版本号，则证明已经安装了。如果想升级npm可以直接通过npm自己来升级npm install --global npm。
常用命令：

• npm init [-y] 生成package.json 包描述文件。其中的dependencies 选项的作用，可以帮我们保存第三方包的名字。如果删除了node_modules也不用担心，我们只需要执行npm install就可以把package.json中dependencies中所有的依赖全部下载下来。
• npm install (npm i)一次性把dependencies中的全部的依赖项全部下载下来。
• npm install （npm i 包名）把需要的包下载下来。
• npm uninstall 包名（npm un [包名]） 删除下载的包。
• npm update 包名 更新。
• npm ls 列出当前安装的了所有包。
• npm help 帮助，如果要单独查看某个命令的帮助，可以使用的npm help 命令名。

解决npm被墙问题

方法一：
安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
方法二：把下载源改了。

核心模块

• 使用的时候就可以通过 require('包名') 的方式来进行加载才可以使用。
• 核心模块的本质也是文件。
• 核心模块文件已经被编译到了二进制文件中了，我们只需要按照名字来加载就可以了。

第三方模块

• 凡是第三方模块都必须通过 npm 来下载。
• 使用的时候就可以通过 require('包名') 的方式来进行加载才可以使用。

• 注意：

  • 不可能有任何一个第三方包和核心模块的名字是一样的。
  • 第三方模块既不是核心模块、也不是路径形式的模块。

  • 它的加载原理如下：

    • 先找到当前文件所处目录中的 node_modules 目录（从该文件的位置开始，一层层的向上查询，直到找到该目录，或者找到磁盘根目录）。
  • 找到该模块的文件夹。
  • 找到该模块的文件夹内的package.json 文件。
  • 找到该模块的文件夹内的package.json 文件中的 main 属性。
  • main 属性中就记录了 art-template 的入口模块。
  • 然后加载使用这个第三方包，实际上最终加载的还是文件。
  • 如果 package.json 文件不存在或者 main 指定的入口模块是也没有，则 node 会自动找该目录下的 index.js，也就是说 index.js 会作为一个默认备选项。
  • 如果以上所有任何一个条件都不成立，则会进入上一级目录中的 node_modules 目录查找如果上一级还没有，则继续往上上一级查找。如果直到当前磁盘根目录还找不到，最后报错：can not find module xxx var template = require('art-template')
  • 我们一个项目有且只有一个 node_modules，放在项目根目录中，这样的话项目中所有的子目录中的代码都可以加载到第三方包,不会出现有多个 node_modules

  • 模块查找机制

    • 优先从缓存加载
    • 核心模块
    • 路径形式的文件模块
    • 第三方模块

非路径形式的模块标识(自己写的模块）

• 路径形式的模块：

  • ./ 当前目录，不可省略
  • ../ 上一级目录，不可省略
  • /xxx 绝对路径，从该文件的磁盘根目录开始(几乎不用)
  • d:/a/foo.js 绝对路径(几乎不用)
  • 首位的 / 在这里表示的是当前文件模块所属磁盘根路径
  • .js 后缀名可以省略
• 引入方式require('./foo.js')

• 在 Node 中，每个模块内部都有一个自己的 module 对象。
• 该 module 对象中，有一个成员叫：exports 也是一个对象。
• 我们可以把需要导出的成员都挂载到 module.exports 接口对象中，也就是：moudle.exports.xxx = xxx 的方式，但是每次都 moudle.exports.xxx = xxx 很麻烦，点儿的太多了，所以 Node 为了你方便，同时在每一个模块中都提供了一个成员叫：exports，也就是说：exports === module.exports 结果为 true，所以对于：moudle.exports.xxx = xxx 的方式 完全可以：expots.xxx = xxx。
• 当一个模块需要导出单个成员的时候，这个时候必须使用：module.exports = xxx 的方式，不要使用 exports = xxx 不管用，因为每个模块最终向外 return 的是 module.exports。
• 而 exports 只是 module.exports 的一个引用。
• 所以即便你为 exports = xx 重新赋值，也不会影响 module.exports，但是有一种赋值方式比较特殊：exports = module.exports 这个用来重新建立引用关系的。

• 在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。当然也可以设置成自己喜欢的颜色。
  -webkit-tap-highlight-color:transparent;/清除点击高亮效果/

• 通过css3的新属性box-sizing我们能够让盒子有限顾及自己的尺寸而不是内容,避免出现多余的滚动条。

  -webkit-box-sizing: border-box;/*webkit内核兼容性写法*/
  box-sizing: border-box;

• 在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除,比如立体效果,3d效果等等,我们需要添加下列样式。
  -webkit-appearance: none;/*在移动端清除浏览器默认样式*/

• 考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题。

  max-width: 640px;  /*在行业当中的移动端的设计图一般使用的是640px*/
  min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

• nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,我们可以限定在某一个类型上,语法如下

  • E:first-of-type匹配同类型中的第一个元素E。
  • E:last-of-type匹配同类型中的最后一个元素E。
  • E:nth-of-type(n) 匹配同类型中的第n个元素E。

viewport 是用户网页的可视区域。如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话，viewport就相当于相框中的画,可能会比相框小,可能会比相框大,最好是一样大。该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的。
语法设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

标签值：

• width:设置layout viewport 的宽度，为一个正整数，或字符串"width-device"。
• initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
• minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
• maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
• height:设置layout viewport 的高度，这个属性对我们并不重要，很少使用。
• user-scalable:是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

Emmet语法中，输入meta:vp,然后按tab键，会自动生成viewport的代码。

$.ajax({}) 方法

参数很多，可以通过手册来使用，在这里简单写一个小案例，说一下比较常用的参数。

$.ajax({
        url:'01.php',//请求地址
        data:'name=fox&age=18',//发送的数据
        type:'GET',//请求的方式
        success:function (argument) {},// 请求成功执行的方法
        beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},//请求失败调用
    })

$.get()方法

参数列表

注意：我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化name=fox&age=10类似这样的格式,JQuery已经帮助我封装好了一个格式化数据的方法$('form').serialize()

$.post()方法

参数列表: