亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2017年05月26日 09:49:36   作者:涼風(fēng)有興  
本篇文章主要介紹了詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

盡管不打算使用數(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("服務(wù)器返回異常");
      } }, 
     error: function(data){ 
      alert(JSON.stringify(data));
     } 
    }); 
 function pushDom(data1){ 
  var vm = new Vue({ el: '#app', data: { peps:data1 } });
 }
})

然后到html中,把數(shù)據(jù)渲染出來(lái)

<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)目里面沒(méi)有使用到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("居然沒(méi)有彈窗")
    })
  }
  }
})</script>

html處不用做其它修改。

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

相關(guān)文章

  • vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能

    vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單轉(zhuǎn)盤抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 實(shí)例講解vue源碼架構(gòu)

    實(shí)例講解vue源碼架構(gòu)

    在本篇文章中小編給大家分享了關(guān)于vue源碼架構(gòu)的相關(guān)知識(shí)點(diǎn)內(nèi)容,有需要的朋友們學(xué)習(xí)下。
    2019-01-01
  • Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例

    Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例

    本文主要介紹了Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2024-08-08
  • vue-cli的webpack模板項(xiàng)目配置文件分析

    vue-cli的webpack模板項(xiàng)目配置文件分析

    本篇文章主要對(duì)vue-cli的webpack模板項(xiàng)目配置文件進(jìn)行分析。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • 如何解決sass-loader和node-sass版本沖突的問(wèn)題

    如何解決sass-loader和node-sass版本沖突的問(wèn)題

    這篇文章主要介紹了如何解決sass-loader和node-sass版本沖突的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)

    Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)

    要實(shí)現(xiàn) Vue 自定義組件改變組件背景色,你可以通過(guò) props 將背景色作為組件的一個(gè)屬性傳遞給組件,在組件內(nèi)部監(jiān)聽(tīng)這個(gè)屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過(guò)示例代碼介紹Vue如何實(shí)現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧
    2024-03-03
  • 在Vue使用$attrs實(shí)現(xiàn)構(gòu)建高級(jí)組件

    在Vue使用$attrs實(shí)現(xiàn)構(gòu)建高級(jí)組件

    本文我們主要來(lái)看下Vue3中的$attrs屬性。首先,我們會(huì)介紹它的用途以及它的實(shí)現(xiàn)與Vue2有哪些不兩同點(diǎn),并通過(guò)事例來(lái)加深對(duì)它的理解
    2022-09-09
  • Vue3中的element-plus表格實(shí)現(xiàn)代碼

    Vue3中的element-plus表格實(shí)現(xiàn)代碼

    這篇文章主要介紹了Vue3中的element-plus表格實(shí)現(xiàn)代碼,用組件屬性實(shí)現(xiàn)跳轉(zhuǎn)路由,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-05-05
  • 最新評(píng)論