Explication détaillée de l'utilisation de VUE.JS via les données JSON

Cet article présente principalement l'explication détaillée de l'utilisation de VUE.JS via les données JSON. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

. J'ai récemment reçu un projet relativement simple. Je n'ai pas l'intention d'utiliser une base de données, je prévois simplement d'utiliser des données JSON. Combiné avec le VUE.JS actuellement populaire pour le rendu des données.

Bien que je n'envisage pas d'utiliser une base de données, les opérations générales d'ajout, de suppression, de vérification et de modification restent indispensables. Si vous utilisez une base de données, autant créer une API, puis les sites Web, les applications, etc. pourront fonctionner en fonction de cela. Dans cet article, nous allons simplement le citer.

Jetons d'abord un coup d'œil à mon fichier JSON. Voici un document de catégorie 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"}
]
}

Ensuite, nous allons rendre les données via Javascript Accédez à Navigation. Il y a deux manières ici : Si votre projet a déjà JQuery, vous pouvez vous référer au code suivant :

$(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 } });
 }
})

Ensuite, allez en html et restituez les données

<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>

Le code ci-dessus utilise le $.ajax de JQuery pour importer des données json, mais si JQuery n'est pas utilisé dans votre projet, vous devez utiliser vue-resource.js .

Introduit en html :

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

La première fois que j'ai utilisé vue-resource.js, il ne correspondait pas à la version de vue.js et j'ai fait des erreurs fréquentes. C'est quelque chose que les débutants doivent faire. faites attention à. C'est un piège si vous exécutez le code suivant et qu'il ne peut pas être rendu, vous rencontrerez ce piège dans 99 % des cas.

<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>

Pas besoin d'apporter d' autres modifications au code HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!