快捷導(dǎo)航

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

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

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

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

廢話不多說，直接上代碼

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加載數(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"
  }
 ]
}

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

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

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

您可能感興趣的文章:

相關(guān)文章

Vue使用自定義指令打開dialog的實現(xiàn)方法
在web后臺管理項目中,經(jīng)常要用到dialog,就vue來說,使用方式則是引入組件,注冊,在template中使用,試想一下,如果我們需要在項目中的不同.vue文件中使用該dialog,但是又不想每次都在template中寫入組件該如何實現(xiàn)呢？本文我們介紹用指令控制dialog,需要的朋友可以參考下
2024-07-07
Vue3.0插件執(zhí)行原理與實戰(zhàn)
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實戰(zhàn)，Vue項目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下
2022-02-02
講解vue-router之命名路由和命名視圖
這篇文章主要介紹了講解vue-router之命名路由和命名視圖，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue組件的計算屬性和普通屬性的區(qū)別說明
這篇文章主要介紹了Vue組件的計算屬性和普通屬性的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue3中的響應(yīng)式原理-effect
這篇文章主要介紹了vue3中的響應(yīng)式原理-effect，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
VSCode使React?Vue代碼調(diào)試變得更爽
這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
不同場景下Vue中虛擬列表實現(xiàn)
虛擬列表用來解決大數(shù)據(jù)量數(shù)據(jù)渲染問題,由于一次性渲染性能低,所以誕生了虛擬列表渲染,下面我們就來學(xué)習(xí)一下不同場景下Vue中虛擬列表是如何實現(xiàn)的吧
2023-10-10
淺析Vue下的components模板使用及應(yīng)用
這篇文章主要介紹了Vue下的components模板的使用及應(yīng)用，本文通過代碼介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
vue elementUI 表單嵌套驗證的實例代碼
這篇文章主要介紹了vue + elementUI 表單嵌套驗證,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-11-11
vue項目npm?run?build打包dist文件及打包后空白解決辦法
npm run build 這個命令會執(zhí)行Vue CLI中預(yù)定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關(guān)于vue項目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下
2023-10-10