首页 > 代码库 > vue在使用ajax获取数据时，两种方法（jquery和vue_resource)
vue在使用ajax获取数据时，两种方法（jquery和vue_resource)
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="http://www.mamicode.com/~/Scripts/jquery-1.8.2.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
@*支持ajax版本1.1.0以下的版本*@
<script src="http://cdn.bootcss.com/vue-resource/1.1.0/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
</tr>
<tr v-for="item in Students">
<td>{{item.ID}}</td>
<td>{{item.Name}}</td>
<td>{{item.Cls}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
Students:""
},
//第一种:jquery ajax
//beforeCreate: function () {
// var url = "/Home/Vue_Data";
// var _self = this;
// $.get(url, function (data) {
// _self.Students = JSON.parse(data);
// })
//}
//第二种：vue_resource
created:function(){
var _self = this;
var url="/Home/Vue_Data";
_self.$http.get(url).then(function (data) {
var json = data.body;
_self.Students = JSON.parse(json);
});
}
});
</script>
vue在使用ajax获取数据时，两种方法（jquery和vue_resource)