Zwei Möglichkeiten zum Laden von Daten mit Vue.Js in Kombination mit Jquery Ajax-js-Tutorial-php.cn

Zwei Möglichkeiten zum Laden von Daten mit Vue.Js in Kombination mit Jquery Ajax

不言

Freigeben： 2018-05-05 16:32:48

Original

3161 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die beiden Methoden zum Laden von Daten mithilfe von Vue.Js in Kombination mit Jquery Ajax vorgestellt. Interessierte Freunde können sich auf

beziehen, um die Dokumente zu organisieren und einen Code zu finden, der verwendet wird Vue.Js kombiniert mit Jquery Ajax, um Daten auf zwei Arten zu laden. Ich werde sie auf leicht organisierte und optimierte Weise mit Ihnen teilen.

Ohne weitere Umschweife gehen wir direkt zum Code

HTML-Code

<!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>
  <p 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>
  </p>


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

Nach dem Login kopieren

JS-Code

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

  },
  methods:{
    showData:function () {
      jQuery.ajax({
        type: &#39;Get&#39;,
        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: &#39;Get&#39;,
    url: "/vue1/json/data.json",
    success: function (data) {
      vum.message = data.sites[0].Name;
    }
  })
}

Nach dem Login kopieren

JSON-Datei

{
 "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"
  }
 ]
}

Nach dem Login kopieren

Um die Anfrage zu simulieren, verwenden Sie die lokale JSON-Datei Bei der Entwicklung können Sie die Jquery-Ajax-URL durch die Schnittstellenadresse ersetzen.

Die Dateiverzeichnisstruktur wird unten angezeigt

Verwandte Empfehlungen:

Einführung des Tinymce-Rich-Text-Editors in das Vue-Projekt

Analyse der Implementierungsmethode für verschachteltes Routing und 404-Umleitung von Vue

Globale Konfiguration des Vue-Projekts, WeChat-Austausch von Ideen

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten zum Laden von Daten mit Vue.Js in Kombination mit Jquery Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!