@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <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>
    @*支持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)的更多相关文章

  1. ajax获取值的两种方法

    详细连接https://blog.csdn.net/a1102325298/article/details/80785143 ajax获得表单值的俩种方法 2018年06月23日 17:12:02 延 ...

  2. debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误

    因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...

  3. vue 中通过 ajax 获取数据时，如何避免绑定的数据中出现 property of undefined 错误

    参考链接:https://segmentfault.com/q/1010000008264089?_ea=1597485

  4. ajax 请求数据的两种方法

    实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写script 片段 这里我演示的是一个传递参数查询的例子 ...

  5. Ajax请求数据的两种方式

    ajax 请求数据的两种方法,有需要的朋友可以参考下. 实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写 ...

  6. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  7. php获取数组中重复数据的两种方法

    分享下php获取数组中重复数据的两种方法. 1,利用php提供的函数,array_unique和array_diff_assoc来实现 <?php function FetchRepeatMem ...

  8. Java构造和解析Json数据的两种方法详解二

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...

  9. Java构造和解析Json数据的两种方法详解二——org.json

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...

随机推荐

  1. 【转】idea激活搭建授权服务器

    1.下载软件:磁力链接: magnet:?xt=urn:btih:2289E4F8CEB346AC44E54C8C0DA706CC537301AA 复制磁力链接地址 magnet:?xt=urn:bt ...

  2. 用 nodejs 写一个命令行工具 ：创建 react 组件的命令行工具

    用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...

  3. noip2016前的话[漫谈]

    今天是11月15日,离noip2016还剩三天: 今年我也是高二了,回首一下去年的时光,真的仿佛仍在昨天,我甚至现在还清楚的记得,当年那次我们做的每一件事: 星期五,回去与室友告别,得到了祝愿,乘公交 ...

  4. IDEA中使用git详细步骤

    1.idea中配置git 设置 版本控制 git 配置git的执行路径(git.ext) 2.把项目推送到远程仓库(码云项目管理) a.在码云创建一个项目 b.复制项目的URL c.找到要上传到码云管 ...

  5. Oracle备份与恢复：冷备份恢复

    模拟数据库数据文件丢失的情况下,通过丢失之前的数据文件物理备份做恢复: 说明:数据文件丢失前一刻的所有归档日志都存在. 环境:oracle10g +rhel5 1.关闭数据库,copy system0 ...

  6. [SDOI 2008] 洞穴勘测

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2049 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...

  7. 【转】设置cocos2dx 屏幕分辨率

    [转载连接:]http://www.cnblogs.com/onlycxue/p/3500026.html 做手机上的软件首先要考虑的就是屏幕分辨率怎么解决.coco2dx已经有了很好的解决方法. 用 ...

  8. idea类名下有红色波浪线

    能编译通过说明SDK导入正确,但是为啥我们点击每一个Java文件会出现好多红色的下划线 ,并提示idea cant resolve symbol 原因就是可能没有清除原来的历史缓存,导致一些错误,解决 ...

  9. centos7命令行模式安装&&配置_br0+kvm+虚拟机+添加硬盘+快照及恢复

    KVM创建虚拟机步骤 Submitted by zhaoley on October 18, 2016 - 10:43am 测试环境: 1: 43.243.130.89, CentOS Linux r ...

  10. Bootstrap Notify

    https://github.com/mouse0270/bootstrap-notify $.notify('Hello World', { offset: { x: 50, y: 100 } }) ...