## vue-resource 官网链接： - http相关： 按照先后顺序，导入vue.js和vue-resource.js文件。 ### get 请求 **格式**： ```javascript this.$http.get(url) .then(function (response) { var data = response.body; //response.body是要获取的数据 }, function (err) { //err是异常数据 }); ``` 获取到的`response.body`就是要获取的数据，但直接打印出来是 object，所以要记得转成string。 **举例**：获取数据 现规定，获取品牌数据的 api 接口说明如下： 20180422_2140.png ```html Document
编号 名称 创建时间 操作
{{item.id}} {{item.name}} {{item.ctime}} 删除
``` 上方代码中，我们用到了生命周期函数`created`，意思是：程序一加载，就马上在`created`这个函数里执行`getlist()`方法。 运行的结果如下： 20180422_2152.png 如果我直接在浏览器中输入请求的url，获取的json数据如下：（这种方式获取的是相同的数据） 20180422_2150.png ### post请求 **格式**： ```javascript // 调用 $http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true}) this.$http.post(url, { name: '奔驰' }, { emulateJSON: true }) .then(function (response) { alert(response.body.message); }, function (error) { }); ``` 上方代码中，post()方法中有三个参数，其中第三个参数是固定值，照着写就可以了。 **代码举例**：（添加数据） 现规定，添加品牌数据的 api 接口说明如下： 20180422_1720.png 代码如下：（在上一段代码的基础之上，添加代码） ```html Document
编号 名称 创建时间 操作
{{item.id}} {{item.name}} {{item.ctime}} 删除
``` **代码举例**：（删除数据） ```html Document
编号 名称 创建时间 操作
{{item.id}} {{item.name}} {{item.ctime}} 删除
``` ### jsonp 20180420_2250.png ```javascript // 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是： // url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上 this.$http.jsonp('http://vuecms.ittun.com/api/getlunbo?id=1') .then(function (response) { console.log(JSON.stringify(response.body)); }, function (err) { //err是异常数据 }); ``` 请求结果： 20180420_2256.png