vue全家桶与vue-resource知识点 02

vue

vue全家桶

vue框架
请求数据：vue-resource ,替代我们的jquery，或者原生ajax封装
单页面路由： vue-router ,替代我们原生的路由
懒加载： vue-load-lazy ，优化页面图片加载
通讯机制： vuex，解决vue原生组件件通讯成本高的问题

vue-resoure内容

1、如何安装
2、怎么启用
3、具体怎么用

vue-resource: 干什么用

解决异步或跨域数据交互(请求和响应)
原文：The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

怎么安装

两种办法：
第一种：直接安装

npm install vue-resource

第二种：package.json配置

  "dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.3.4",
    "vue-router": "^3.0.1"
  }

如何使用vue-resource插件

分三步
第一步：引入插件

import VueResource from 'vue-resource'

第二部：启用

Vue.use(VueResource);

第三步：直接使用

想在哪里用，就在哪里掉 => 组件请求数据：created阶段请求
处理函数：methods中的某个函数调用
记得：created 和 methods
翻译过来：第一次请求数据，交互时请求数据(点击事件，比如：下啦刷新，滚动底部加载更多，点击下一页)

this.$http.具体方法

用法

{
  // GET /someUrl 
  this.$http.get('/someUrl').then(res => {
    // get body data 
    this.someData = res.body;
  });
}

api参考

// global Vue object === 这种暂时用不上
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

常用

this.$http.get('/someUrl', [options]).then(successCallback);
this.$http.jsonp('/someUrl', [options]).then(successCallback);