JSONデータによるVUE.JSの使い方を詳しく解説

この記事では主に JSON データを通じて VUE.JS の使用方法を詳細に説明します。興味のある友人は参照してください

最近比較的簡単なプロジェクトを受け取りましたが、使用する予定はありません。データベースでは、JSON データを使用する予定です。現在人気のある VUE.JS と組み合わせてデータをレンダリングします。

データベースを使用する予定はありませんが、追加、削除、確認、変更などの一般的な操作は依然として不可欠です。データベースを使用する場合はAPIを作成すると、Webサイトやアプリなどがこれに従って動作します。この記事では、単純に引用することにします。

まず、私の JSON ファイルを見てみましょう。これはカテゴリ ドキュメントの 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"}
]
}

次に、Javascript を介してレンダリングし、データを Navigation にレンダリングします。ここには 2 つの方法があります: プロジェクトに既に JQuery が付属している場合は、次のコードを参照できます:

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

次に、HTML に移動してデータをレンダリングします

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

上記のコードは、JQuery の $ を使用して json データをインポートします。ただし、プロジェクトで JQuery が使用されていない場合は、vue-resource.js を使用する必要があります。

HTMLで紹介:

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

初めてvue-resource.jsを使用したとき、vue.jsのバージョンと一致せず、頻繁にエラーが発生しました。これは初心者が注意しなければならないことです。これは落とし穴です。次のコードを実行してもレンダリングできない場合は、99% の確率でこの落とし穴に遭遇します。

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

HTML に その他 の変更を加える必要はありません。

以上がJSONデータによるVUE.JSの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。