Vue — JSON & v-for

實作撈取 JSON 檔案與 v-for 的簡易應用

Photo by JESHOOTS.COM on Unsplash

前端的技術日新月異，雖然手刻 JavaScript 才是真高手，但如果能善用工具，縮短專案開發時間，追求時效可能是現代人更訴求的。(以上為有點廢話的前言 XD)

想邁向前端路，框架一定要學起來，才剛接觸 Vue，學習了幾個語法就覺得很強大，做了簡易的練習，也順便要記錄起來，日後還不時的可以回來瀏覽補強。

Steps:

1. 建立/載入 JSON 資料
2. 了解 Vue 生命週期
3. 載入所需資料
4. 畫面呈現

建立/載入 JSON 資料

可以自行建立簡易的 JSON 格式資料，或是網路尋找可使用的 JSON 資料庫，此次練習為自行建立資料。

了解 Vue 生命週期

創建 Vue 實例 (new Vue) 後，要在掛載時把資料載回，資料要放在

mounted(){...} // 資料從方括號內載入

載入所需資料

載入資料有好幾種做法：

• 原生 fetch().then()
• jQuery 的 $.getJSON().then()
• axios 的 axios.get().then()

此練習用原生 fetch 的寫法，要檢查是否有成功把資料載入，可以在 devtool中的 network 裡，選擇 XHR 後，看下方是否有.json 的檔案存在。

畫面呈現

此範例練習 - 製作課程列表呈現，運用 v-for 跑迴圈，只要用簡易的資料綁定語法綁在 html 裡的標籤，就可以快速跑出所有資料，原始碼如下：

<div id="app" class="app">
  <div v-for="lesson in lessons" class="lesson">
    <h1><a :href="lesson.url">{{lesson.title}}</a></h1>
    <div class="section-img">
      <img :src="lesson.imgSrc">
    </div>
    <h3 class="author">- {{lesson.author}}</h3>
    <p>{{lesson.descript}}</p>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      lessons: [],
  },
  mounted() {
    fetch('./data.json')
     .then(res => res.json())
     .then(lessons => this.lessons = lessons);
  },
 })
</script>

實際練習畫面如下：

畫面連結： https://chloelo.github.io/Vue/v-for_json/