最近接到一個(gè)比較簡(jiǎn)單的項(xiàng)目，不準(zhǔn)備使用數(shù)據(jù)庫(kù)，打算用JSON數(shù)據(jù)就可以了。結(jié)合當(dāng)前火熱的VUE.JS進(jìn)行數(shù)據(jù)渲染。

成都創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷需求！成都創(chuàng)新互聯(lián)公司具備承接各種類型的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)項(xiàng)目的能力。經(jīng)過十多年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

盡管不打算使用數(shù)據(jù)庫(kù)，可是一般的操作增刪查改依舊是少不了的。如果使用到數(shù)據(jù)庫(kù)的話，不妨做一個(gè)API出來，那么網(wǎng)站、APP等都可以依照這個(gè)進(jìn)行操作。在這篇文章里面，我們只是打算簡(jiǎn)單的引用而已。

下面先來看看我的JSON文件，這里是一個(gè)類別文檔Category.json：

{
  "msg": "ok",
  "data":[
{
 "ID":"1",
 "name": "地產(chǎn)",
 "Url":"/Category/List/1"
},
{ "ID":"2",
 "name": "科技",
 "Url":"/Category/List/2"},
{ "ID":"3",
 "name": "醫(yī)藥",
 "Url":"/Category/List/3"},
{ "ID":"4",
 "name": "其他",
 "Url":"/Category/List/4"}
]
}

下面我們通過Javascript進(jìn)行渲染，將數(shù)據(jù)渲染到導(dǎo)航里面去。這里有兩種方式：如果你的項(xiàng)目已經(jīng)帶有JQuery的話，可以參考一下使用下面的代碼：

$(function(){ 
    $.ajax({ 
     type:'get', 
     url:'Category.json', 
     success: function(data){ 
      if(data.msg == "ok"){
       pushDom(data.data); 
      }
      else
      { 
       alert("

然后到html中，把數(shù)據(jù)渲染出來

<div id="app" class="inner">
  <ul v-for = "pep in peps ">
    <li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li>
  </ul>
 </div>

上面的代碼是使用JQuery的$.ajax 將json的數(shù)據(jù)引入，但如果你的項(xiàng)目里面沒有使用到JQuery的話，就要使用到vue-resource.js了。

在html中引入：

<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>

我第一次使用vue-resource.js的時(shí)候，和vue.js版本不匹配居然屢屢出錯(cuò)，這是新手必須要注意的。這是一個(gè)坑啊，如果你們運(yùn)行下面的代碼不能渲染的話，99%是遇到這個(gè)坑了。

<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處不用做其它修改。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標(biāo)題名稱：詳解通過JSON數(shù)據(jù)使用VUE.JS
文章URL：http://jinyejixie.com/article6/ppicog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、、建站公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)