一、Vue中的ajax：vue-resource和axios
vue-resource是Vue实现异步加载的官方库，即Vue中的ajax。在Vue2.js之后vue-resource将不再更新维护，所以推荐尽量使用第三方库axios实现异步加载。
下面将对两种库分别进行使用说明，参考：
vue-resource
axios
1、vue-resource的使用首先我们需要引入库文件：
<script src="http://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>vue-resource同jquery封装的Ajax一样，提供了简易的api实现异步访问。提供了 7 种请求 API(REST 风格)：
get(url, [options]) head(url, [options]) delete(url, [options]) jsonp(url, [options]) post(url, [body], [options]) put(url, [body], [options]) patch(url, [body], [options])除了 jsonp 以外，另外 6 种的 API 名称是标准的 HTTP 方法。
具体的参数说明请参考：Vue.js-菜鸟
在Vue中，你可以基于全局或组建进行异步访问：
// 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);下面我们使用具体的案例来体验一下。
2、vue-resoure案例：获取商品列表我们现在的需求是，使用vue-resource提供的api获取服务端发送来的数据，并显示出来。然后可以添加和删除页面上的商品数据，并发送请求更新服务端的数据。
分析首先我们需要从服务端获取商品信息，所以我们需要自己模拟一个服务端，使用Node.js来快速搭建即可。
异步加载可能出现跨域的问题，我们可以使用api提供的jsonp方法进行数据的访问，也可以将页面放到在Node服务器上访问，这里我们使用第二种方法。
准备工作
使用node搭建服务器
首先我们需要安装第三方模块：express、body-parser。
npm install express body-parser书写app.js文件：
//加载需要的模块 var express = require('express'); var app = express(); var fs = require('fs'); var path = require('path'); var bodyParser = require('body-parser'); //启动服务器 app.listen(8080, function(){ console.log('server running at 8080'); }); //相关配置 app.use('/views', express.static(path.join(__dirname, './views')));//静态资源 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); //相关请求 app.get('http://www.likecs.com/', (req, res) => { res.redirect(302, '/views/index.html'); });
页面文件index.html
我们把这个文件放在node文件夹的views下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加信息</title> <link href="http://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="http://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="http://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script src="http://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> </head> <body> <div> <div> <div> <h3>{{title}}</h3> </div> </div> <div> <label> Id: <input type="text" v-model="id" required="true" @keyup.enter="add"> </label> <label> Name: <input type="text" v-model="name" required="true" @keyup.enter="add"> </label> <input type="button" @click="add" value="添加"> <label @click="clearMessage"> {{message}} </label> </div> <table> <thead> <tr> <td>Id</td> <td>Name</td> <td>Date</td> <td>Control</td> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td><span title="删除" @click="deleteItem(item.id)"></span></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { list : [], id:'', name:'', title: '添加信息', message: '' }, methods: { add(){ console.log("添加"); }, clearMessage(){ this.message = ''; }, deleteItem(id){ console.log("删除"); } } }); </script> </body> </html>
启动服务器查看效果
Node.js返回数据
我们使用list.json这个文件来充当数据库。
app.get('/getlist', (req, res) => { fs.readFile('./list.json', 'utf8', (err, data) => { if(err){ res.json(err); }else{ res.json(JSON.parse(data.toString())); } }); }); { "list":[ {"id":"1","name":"宝马","date":"2019/2/18"}, {"id":"2","name":"众泰","date":"2019/2/18"}, {"id":"3","name":"梅赛德斯","date":"2019/2/19"}, {"id":"4","name":"奥迪","date":"2019/2/19"} ] }