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

前端之家收集整理的这篇文章主要介绍了Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上一篇:Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器

一、 发送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,[options])
    this.$http.patch(url,[options])

练习代码:百度搜索列表

二、Vue生命周期

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

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

三、计算属性

1. 基本用法

计算属性也是用来存储数据,但具有以下几个特点:     
    a.数据可以进行逻辑处理操作
    b.对计算属性中的数据进行监视

2.计算属性 vs 方法

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

3. get和set

计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性
默认只有get,如果需要set,要自己添加

代码:计算属性

四、 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

五、自定义指令

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

1. 自定义全局指令

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

2. 自定义局部指令

代码:自定义指令

3. 练习

拖动页面中的元素
onmouSEOver onmouSEOut 
onmousedown onmousemove  onmouseup

代码:练习

六、过渡(动画)

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)

猜你在找的Ajax相关文章