使用Vue.Js结合Jquery Ajax加载数据的两种方式

为什么80%的码农都做不了架构师？>>> 使用Vue.Js结合Jquery Ajax加载数据的两种方式

废话不多说，直接上代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/jquery.js"></script>
    <script src="js/vue.js"></script>

</head>
<body>
   <div id="app">
       {{message }}<br>
       <button v-on:click="showData">测试jquery加载数据</button>
       <table border="1">
           <tr v-for="data in datas">
               <td>{{data.Name}}</td>
               <td>{{data.Url}}</td>
               <td>{{data.Country}}</td>
           </tr>
       </table>
   </div>


   <script src="js/app.js"></script>
</body>
</html>

js代码

/**
 * Created by sen on 2016/10/31.
 */
//定义Vue组件
var vum=new Vue({
    el: "#app",
    data: {
        message: "",
        datas: "",

    },
    methods:{
        showData:function () {
            jQuery.ajax({
                type: 'Get',
                url: "/vue1/json/data.json",
                success: function (data) {
                    vum.datas = data.sites;
                }
            })
        }
    }
})
//使用jquery
jQuery(function () {
    // jQuery("#btn_1").bind("click", function () {
    //     alert(jQuery("#name").val());
    // });
    loadData();
})
//jquery加载数据
function loadData() {
    jQuery.ajax({
        type: 'Get',
        url: "/vue1/json/data.json",
        success: function (data) {
            vum.message = data.sites[0].Name;
        }
    })
}

json文件

{
  "sites": [
    {
      "Name": "百度",
      "Url": "www.baidu.com",
      "Country": "CN"
    },
    {
      "Name": "Google",
      "Url": "www.google.com",
      "Country": "USA"
    },
    {
      "Name": "Facebook",
      "Url": "www.facebook.com",
      "Country": "USA"
    },
    {
      "Name": "微博",
      "Url": "www.weibo.com",
      "Country": "CN"
    }
  ]
}

为了模拟请求使用本地的json文件，正式开发可将Jquery ajax的url换成接口地址。

文件目录结构见下（不能上传附件，需要源码的私聊）

使用Vue.Js结合Jquery Ajax加载数据的两种方式

转载于:https://my.oschina.net/senit/blog/778723

使用Vue.Js结合Jquery Ajax加载数据的两种方式

相关推荐