快捷導(dǎo)航

詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式

更新時(shí)間：2017年01月10日 09:23:31 作者：o黑色烏鴉o

本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

整理文檔，搜刮出一個(gè)使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式的代碼，稍微整理精簡(jiǎn)一下做下分享。

廢話不多說(shuō)，直接上代碼

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">測(cè)試jquery加載數(shù)據(jù)</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加載數(shù)據(jù)
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"
  }
 ]
}

為了模擬請(qǐng)求使用本地的json文件，正式開(kāi)發(fā)可將Jquery ajax的url換成接口地址。

文件目錄結(jié)構(gòu)見(jiàn)下

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題解決辦法
最近項(xiàng)目更新頻繁,每次一更新客戶都說(shuō)還跟之前的一樣,一查原因是因?yàn)榭蛻魶](méi)有清空瀏覽器的緩存,所以為了方便客戶看到最新版本,開(kāi)始調(diào)研再發(fā)布新版本后自動(dòng)清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題的解決辦法,需要的朋友可以參考下
2024-02-02
Antd表格滾動(dòng) 寬度自適應(yīng) 不換行的實(shí)例
這篇文章主要介紹了Antd表格滾動(dòng) 寬度自適應(yīng) 不換行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
axios庫(kù)的核心代碼解析及總結(jié)
這篇博客針對(duì)axios庫(kù)的核心代碼做一個(gè)簡(jiǎn)要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue 右鍵菜單插件簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單
這篇文章主要介紹了vue 右鍵菜單插件簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單，本文給大家分享個(gè)例子，給大家及時(shí)的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-11-11
解決Vue使用百度地圖BMapGL內(nèi)存泄漏問(wèn)題?Out?of?Memory
這篇文章主要介紹了解決Vue使用百度地圖BMapGL內(nèi)存泄漏問(wèn)題?Out?of?Memory，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue3給動(dòng)態(tài)渲染的組件添加ref的解決方案
ref和reactive一樣,也是用來(lái)實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動(dòng)態(tài)渲染的組件添加ref的解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue安裝依賴npm install時(shí)的報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue動(dòng)態(tài)組件和異步組件原理詳解
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和異步組件原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
在Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟
在工作中遇到需要前端上傳excel文件獲取到相應(yīng)數(shù)據(jù)處理之后傳給后端并且展示上傳文件的數(shù)據(jù),所以本文就來(lái)給大家介紹一下Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟,需要的朋友可以參考下
2023-08-08
vue2中provide/inject的使用與響應(yīng)式傳值詳解
Vue中 Provide/Inject實(shí)現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09