This article mainly introduces the detailed explanation of using VUE.JS through JSON data, which has certain reference value. Interested friends can refer to it
I recently received a relatively simple project. I don’t plan to use a database. I just plan to use JSON data. Combined with the currently popular VUE.JS for data rendering.
Although I don’t plan to use a database, general operations of adding, deleting, checking and modifying are still indispensable. If you use a database, you might as well make an API, then websites, apps, etc. can operate according to this. In this article, we are just going to simply cite.
Let’s take a look at my JSON file first. Here is a category document 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"} ] }
Next we render through Javascript and render the data to NavigationGo inside. There are two ways here: If your project already has JQuery, you can refer to the following code:
$(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 } }); } })
Then go to html and render the data
<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>
The above code uses JQuery's $.ajax to import json data, but if JQuery is not used in your project, vue-resource.js will be used.
Introduced in html:
<script src="/js/vue.js"></script> <script src="/js/vue-resource.js"></script>
When I used vue-resource.js for the first time, I repeatedly made errors when it did not match the vue.js version. This is something novices must pay attention to. This is a pitfall. If you run the following code and it cannot be rendered, 99% of the time you have encountered this pitfall. No
other