この記事では主に 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: '#app', data: { peps: '' }, mounted: function() { this.getJsonInfo() }, methods: { getJsonInfo: function() { this.$http.get('Category.json').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 サイトの他の関連記事を参照してください。