Vue.js尚硅谷视频学习笔记(第三章：vue-ajax)

内容大部分文字描述来自尚硅谷课件，实例操作截图和注释内容为亲测。

第3 章：vue-ajax

3.1. vue 项目中常用的2 个ajax 库

3.1.1. vue-resource

vue 插件, 非官方库, vue1.x 使用广泛

3.1.2. axios

通用的ajax 请求库, 官方推荐, vue2.x 使用广泛

3.2. vue-resource 的使用

3.2.1. 在线文档

https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

3.2.2. 下载

npm install vue-resource --save

3.2.3. 编码

// 引入模块
import VueResource from 'vue-resource'
// 使用插件
Vue.use(VueResource)
// 通过vue/组件对象发送ajax 请求
this.$http.get('/someUrl').then((response) => {
	// success callback
	console.log(response.data) //返回结果数据
}, (response) => {
	// error callback
	console.log(response.statusText) //错误信息
})

实例：
main.js

import  Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'

//声明使用插件
Vue.use(VueResource)
//内部会给vm对象和组件对象添加一个属性: $http(两个方法：get()和post())

new Vue({
    el: '#app',
    components: {App},
    template: ''
})

App.vue

3.3. axios 的使用

在线文档

https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

下载:

npm install axios --save

编码

// 引入模块
import axios from 'axios'
// 发送ajax 请求
axios.get(url)
	.then(response => {
	console.log(response.data) // 得到返回结果数据
	})
	.catch(error => {
	console.log(error.message)
	})

App.js

3.4. 测试接口

接口1: https://api.github.com/search/repositories?q=v&sort=stars
接口2: https://api.github.com/search/users?q=aa

3.5. demo3: github users

main.js

import  Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'

//声明使用插件
Vue.use(VueResource)
//内部会给vm对象和组件对象添加一个属性: $http(两个方法：get()和post())

new Vue({
    el: '#app',
    components: {App},
    template: ''
})

App.vue

Main.vue

Search.vue