How to use VUE.JS code through JSON data to share in detail

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

modifications are required in

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

The above is the detailed content of How to use VUE.JS code through JSON data to share in detail. For more information, please follow other related articles on the PHP Chinese website!