@{
    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. Cats transport(codeforces311B)(斜率优化)

    \(Cats Transport\) 感觉这道题题面不好讲,就自翻了一个新的,希望有助于大家理解其思路: 大致题意: \(wch\) 的家里有 \(N\) 座山(山呈直线分布,第 \(i-1\) 座山 ...

  2. Deep Learning 31: 不同版本的keras,对同样的代码,得到不同结果的原因总结

    一.疑问 这几天一直纠结于一个问题: 同样的代码,为什么在keras的0.3.3版本中,拟合得比较好,也没有过拟合,验证集准确率一直高于训练准确率. 但是在换到keras的1.2.0版本中的时候,就过 ...

  3. AIM Tech Round (Div. 2) C. Graph and String

    C. Graph and String time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. css3中animation的应用

    1.css3 的相关属性: 相关代码: div { animation-name: myfirst; //动画的名称 animation-duration: 5s; //动画一个周期需要5秒 anim ...

  5. 树状数组(二叉索引树 BIT Fenwick树) *【一维基础模板】(查询区间和+修改更新)

    刘汝佳:<训练指南>Page(194) #include <stdio.h> #include <string.h> #include <stdlib.h&g ...

  6. 数据结构之 栈与队列--- 走迷宫(深度搜索dfs)

    走迷宫 Time Limit: 1000MS Memory limit: 65536K 题目描述 一个由n * m 个格子组成的迷宫,起点是(1, 1), 终点是(n, m),每次可以向上下左右四个方 ...

  7. CodeForces - 55D Beautiful numbers —— 数位DP

    题目链接:https://vjudge.net/problem/CodeForces-55D D. Beautiful numbers time limit per test 4 seconds me ...

  8. 控制cms:CMSDropDownList的width

    查找了一下kentico内部使用相关控件的代码,发现有2种方式,可以达到效果. 在我们自己的css class定义的地方,在class前面加上.cms-bootstrap .cms-bootstrap ...

  9. Java 字符串比较小知识

    使用 String.compareTo 方法: compareTo() 的返回值是int, 它是先比较对应字符的大小(ASCII码顺序). 1.如果字符串相等,返回值0. 2.如果第一个字符和参数的第 ...

  10. MYSQL初级学习笔记五:连接查询!(视频序号:初级_37-41)

    知识点七:连接查询(37-41) 什么是连接查询: 连接查询是将两个或两个以上的表按某个条件连接起来,从中选取需要的数据.连接查询是同时查询两个或两个以上的表时使用的.当不同的表中存在相同意义的字段时 ...