Home > Web Front-end > JS Tutorial > body text

Detailed explanation of using VUE.JS through JSON data

黄舟
Release: 2017-05-28 10:52:09
Original
1792 people have browsed it

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"}
]
}
Copy after login

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 } });
 }
})
Copy after login

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>
Copy after login

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>
Copy after login

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

modifications are required in

html.

The above is the detailed content of Detailed explanation of using VUE.JS through JSON data. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template