詳解使用Vue.Js結合Jquery Ajax加載數據的兩種方式

2019-11-19 18:02:54

字體：大中小

來源：轉載

供稿：網友

整理文檔，搜刮出一個使用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;        }      })    }  }})//使用jqueryjQuery(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換成接口地址。

文件目錄結構見下