Home > Developer > Web Develop
@{
Layout = null;
}
<! DOCTYPE html>
<meta name= "viewport" content= "Width=device-width"/>
<title>Index</title>
<script src= "~/scripts/jquery-1.8.2.min.js" ></script>
<script src= "Https://cdn.bootcss.com/vue/2.2.2/vue.min.js" ></script>
@* supports versions of AJAX version 1.1.0 below *@
<script src= "Http://cdn.bootcss.com/vue-resource/1.1.0/vue-resource.min.js" ></script>
<body>
<div id= "App" >
<table>
<tr>
<td> Study No. </td>
<td> name </td>
<td> class </td>
</tr>
<TR v-for= "item in Students" >
<td>{{item.ID}}</td>
<td>{{item. Name}}</td>
<td>{{item. Cls}}</td>
</tr>
</table>
</div>
</body>
<script>
var app = new Vue ({
El: "#app",
Data: {
Students: ""
},
The first type: jquery Ajax
Beforecreate:function () {
var url = "/home/vue_data";
var _self = this;
$.get (URL, function (data) {
_self. Students = json.parse (data);
// })
//}
The second type: 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 uses Ajax to get data, both methods (jquery and Vue_resource)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
