快捷導(dǎo)航

詳解通過JSON數(shù)據(jù)使用VUE.JS

更新時(shí)間：2017年05月26日 09:49:36 作者：涼風(fēng)有興

本篇文章主要介紹了詳解通過JSON數(shù)據(jù)使用VUE.JS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

盡管不打算使用數(shù)據(jù)庫，可是一般的操作增刪查改依舊是少不了的。如果使用到數(shù)據(jù)庫的話，不妨做一個(gè)API出來，那么網(wǎng)站、APP等都可以依照這個(gè)進(jì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("服務(wù)器返回異常");
      } }, 
     error: function(data){ 
      alert(JSON.stringify(data));
     } 
    }); 
 function pushDom(data1){ 
  var vm = new Vue({ el: '#app', data: { peps:data1 } });
 }
})

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
json

相關(guān)文章

vue異步axios獲取的數(shù)據(jù)渲染到頁面的方法
今天小編就為大家分享一篇vue異步axios獲取的數(shù)據(jù)渲染到頁面的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法,比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧
2024-12-12
vue3-print-nb實(shí)現(xiàn)頁面打印(含分頁打印)示例代碼
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對前端來說當(dāng)然是直接打印頁面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁面打印(含分頁打印)的相關(guān)資料,需要的朋友可以參考下
2024-01-01
解讀Vue-loader的相關(guān)知識(shí)
這篇文章主要介紹了解讀Vue-loader的相關(guān)知識(shí)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue項(xiàng)目中使用axios上傳圖片等文件操作
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧
2017-11-11
使用Vue.js報(bào)錯(cuò)：ReferenceError: “Vue is not d
在前端開發(fā)中,ReferenceError: "Vue is not defined" 是一個(gè)常見的錯(cuò)誤,該錯(cuò)誤通常發(fā)生在項(xiàng)目中未正確引入 Vue.js 框架或代碼配置存在問題時(shí),本篇文章將詳細(xì)分析該錯(cuò)誤的成因,并提供多種解決方案,幫助開發(fā)者快速排查問題,需要的朋友可以參考下
2024-12-12
Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
這篇文章主要介紹了Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09
vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue 中使用print.js導(dǎo)出pdf操作
這篇文章主要介紹了vue 中使用print.js導(dǎo)出pdf操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue項(xiàng)目獲取url中的參數(shù)(親測可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧
2022-08-08