Wie Sie VUE.JS-Code mithilfe von JSON-Daten im Detail teilen können

In diesem Artikel wird hauptsächlich die Verwendung von VUE.JS durch JSON-Daten vorgestellt. Interessierte Freunde können darauf verweisen

Ich habe vor kurzem ein relativ einfaches Projekt erhalten. Ich habe nicht vor, eine Datenbank zu verwenden. Ich habe nur vor, JSON-Daten zu verwenden. Kombiniert mit dem derzeit beliebten VUE.JS zur Datenwiedergabe.

Obwohl ich nicht vorhabe, eine Datenbank zu verwenden, sind allgemeine Vorgänge zum Hinzufügen, Löschen, Überprüfen und Ändern dennoch unverzichtbar. Wenn Sie eine Datenbank verwenden, können Sie genauso gut eine API erstellen, dann können Websites, Apps usw. entsprechend funktionieren. In diesem Artikel werden wir es einfach zitieren.

Schauen wir uns zuerst meine JSON-Datei an. Hier ist ein Kategoriedokument Category.json:

{
  "msg": "ok",
  "data":[
{
 "ID":"1",
 "name": "地产",
 "Url":"/Category/List/1"
},
{ "ID":"2",
 "name": "科技",
 "Url":"/Category/List/2"},
{ "ID":"3",
 "name": "医药",
 "Url":"/Category/List/3"},
{ "ID":"4",
 "name": "其他",
 "Url":"/Category/List/4"}
]
}

Als nächstes rendern wir die Daten über Javascript Navigation. Hier gibt es zwei Möglichkeiten: Wenn Ihr Projekt bereits über JQuery verfügt, können Sie auf den folgenden Code verweisen:

$(function(){ 
    $.ajax({ 
     type:'get', 
     url:'Category.json', 
     success: function(data){ 
      if(data.msg == "ok"){
       pushDom(data.data); 
      }
      else
      { 
       alert("服务器返回异常");
      } }, 
     error: function(data){ 
      alert(JSON.stringify(data));
     } 
    }); 
 function pushDom(data1){ 
  var vm = new Vue({ el: '#app', data: { peps:data1 } });
 }
})

Gehen Sie dann zu HTML und rendern Sie die Daten

<p id="app" class="inner">
  <ul v-for = "pep in peps ">
    <li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li>
  </ul>
 </p>

Der obige Code verwendet $.ajax von JQuery, um JSON-Daten zu importieren. Wenn JQuery jedoch nicht in Ihrem Projekt verwendet wird, müssen Sie vue-resource.js verwenden.

Eingeführt in HTML:

<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>

Als ich vue-resource.js zum ersten Mal verwendete, stimmte es nicht mit der vue.js-Version überein und ich habe häufig Fehler gemacht. Das müssen Neulinge sein achten Sie auf. Dies ist eine Gefahr. Wenn Sie den folgenden Code ausführen und er nicht gerendert werden kann, sind Sie in 99 % der Fälle auf diese Gefahr gestoßen.

<script>
  var app = new Vue({
el: &#39;#app&#39;,
data: {
  peps: &#39;&#39;  
},
mounted: function() {
  this.getJsonInfo()
},
methods: {
  getJsonInfo: function() {
    this.$http.get(&#39;Category.json&#39;).then(function(response){
      console.log(response.data.data)
      var resdata = response.data.data
      this.peps = resdata
    }).catch(function(response){
      console.log(response)
      console.log("居然没有弹窗")
    })
  }
  }
})</script>

Es müssen keine anderen Änderungen am HTML vorgenommen werden.

Das obige ist der detaillierte Inhalt vonWie Sie VUE.JS-Code mithilfe von JSON-Daten im Detail teilen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!