詳解透過JSON資料使用VUE.JS的詳解

本篇文章主要介紹了詳解透過JSON資料使用VUE.JS，具有一定的參考價值，有興趣的小夥伴們可以參考一下

最近接到一個比較簡單的項目，不用準備使用資料庫，打算用JSON資料就可以了。結合目前火熱的VUE.JS進行資料渲染。

儘管不打算使用資料庫，但一般的操作增刪查改依舊是少不了的。如果使用到資料庫的話，不妨做一個API出來，那麼網站、APP等都可以依照這個來運作。在這篇文章裡面，我們只是打算簡單的引用而已。

下面先來看看我的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進行渲染，將資料渲染到導航裡面去。這裡有兩種方式：如果你的專案已經帶有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的$.ajax 將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中文網其他相關文章！