最近接到一個(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)銷(xiāo)，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷(xiāo)需求！成都創(chuàng)新互聯(lián)公司具備承接各種類型的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)項(xiàng)目的能力。經(jīng)過(guò)十多年的努力的開(kāi)拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

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

下面先來(lái)看看我的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"}
]
}

下面我們通過(guò)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ù)渲染出來(lái)

  

    
 {{pep.name}}
  
 

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

在html中引入：

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

html處不用做其它修改。

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