Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

上一篇：Vue系列（一）：简介、起步、经常使用指令、事件和属性、模板、过滤器

1、 发送AJAX请求

1. 简介

vue自己不支持发送AJAX请求，须要使用vue-resource、axios等插件实现
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时再也不对vue-resource进行更新和维护

参考：GitHub上搜索axios，查看API文档

2. 使用axios发送AJAX请求

2.1 安装axios并引入

npm install axios -S
也可直接下载axios.min.js文件

2.2 基本用法

axios([options])  
axios.get(url[,options]);
    传参方式：
        1.经过url传参
        2.经过params选项传参
axios.post(url,data,[options]);
    axios默认发送数据时，数据格式是Request Payload，并不是咱们经常使用的Form Data格式，
    因此参数必需要以键值对形式传递，不能以json形式传参
    传参方式：
        1.本身拼接为键值对
        2.使用transformRequest，在请求发送前将请求数据进行转换
        3.若是使用模块化开发，可使用qs模块进行转换

axios自己并不支持发送跨域的请求，没有提供相应的API，做者也暂没计划在axios添加支持发送跨域请求，因此只能使用第三方库

代码：发送AJAX请求

3. 使用vue-resource发送跨域请求

3.1 安装vue-resource并引入

cnpm install vue-resource -S

3.2 基本用法

使用this.$http发送请求  
    this.$http.get(url, [options])
    this.$http.head(url, [options])
    this.$http.delete(url, [options])
    this.$http.jsonp(url, [options])
    this.$http.post(url, [body], [options])
    this.$http.put(url, [body], [options])
    this.$http.patch(url, [body], [options])

练习代码：百度搜索列表

2、Vue生命周期

vue实例从建立到销毁的过程，称为生命周期，共有八个阶段

生命周期图示
代码：Vue生命周期

3、计算属性

1. 基本用法

计算属性也是用来存储数据，但具备如下几个特色：     
    a.数据能够进行逻辑处理操做
    b.对计算属性中的数据进行监视

2.计算属性 vs 方法

将计算属性的get函数定义为一个方法也能够实现相似的功能
区别：
    a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
    b.计算属性是缓存的，只要相关依赖没有改变，屡次访问计算属性获得的值是以前缓存的计算结果，不会屡次执行

3. get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
默认只有get，若是须要set，要本身添加

代码：计算属性

4、 vue实例的属性和方法

1. 属性

vm.$el
vm.$data
vm.$options
vm.$refs

2. 方法

vm.$mount()
vm.$destroy()
vm.$nextTick(callback)

vm.$set(object,key,value)
vm.$delete(object,key)
vm.$watch(data,callback[,options])

代码：实例的属性和方法01
实例的属性和方法02
实例的属性和方法03

5、自定义指令

分类：全局指令、局部指令

1. 自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)

2. 自定义局部指令

代码：自定义指令

3. 练习

拖动页面中的元素
onmouseover onmouseout 
onmousedown onmousemove  onmouseup

代码：练习

6、过渡(动画)

1. 简介

Vue 在插入、更新或者移除 DOM 时，提供多种不一样方式的应用过渡效果
本质上仍是使用CSS3动画：transition、animation

2. 基本用法

使用transition组件，将要执行动画的元素包含在该组件内
    <transition>
        运动的元素
    </transition>       
过滤的CSS类名：6个

3. 钩子函数

8个

动画01
动画02

4. 结合第三方动画库animate.css一块儿使用

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <p v-show="flag">网博</p>
</transition>

5. 多元素动画

<transition-group>

多元素动画01
多元素动画02

下一篇：Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

参考Vue教学视频：Vue.js 2.0之全家桶系列视频课程（vue、vue-router、axios、vuex）