【D15 - 用Vue實作網頁】牽著for的手，帶你走forever

12th鐵人賽 vue.js 前端菜鳥前端

ryanyen2

2020-09-15 21:47:19

2701 瀏覽

分享至

我朝思暮想想了又想~ 覺得這個project可以先暫訂拿來做一個小部落格的樣子，而再開發一個部落格時候，我們可以有小到大去開發! 甚麼意思? 就是說部落格應該有類似這樣的架構: 各類文章類別 -> 單一文章列表 --> 單一文章，而我們就會從最小的，也就是單一文章來下手。

前言

希望各位都有跟上之前的步驟~ 如果沒有跟上可以從 Vue實做網頁這裡開始看一下~ 我也會把我的code放在github. ryanyen2 上面，如果自己做有問題也都歡迎再底下提問~

那我們今天就會先做一個單一文章的顯示，而據我們所知，部落格的文章列表裡面通常絕對不只一個文章! 就像是鐵人系列目前就有15篇的文章，而這些文章雖然內容不一樣但是架構、樣式都大同小異，難道今天有一百篇的文章我們就要寫一百個components嗎?

Vue在這個時候提供了一個我們程式語言常用的邏輯給我們 -> for loop! 這個東西解救了無數工程師的生命啊XDXD，所以我們可以做一個模板，接下來用for loop去跑你要幾個文章，他就會把模板一一複製下去! 相當的有趣~

列表渲染

我們之前在Day 9、還有Day 10講到了資料綁定的概念，但是那些都是綁定單筆資料的工具，如果要綁定一堆東西，或是從比較複雜的結構提去東西，就勢必要用到 v-for這個 for loop迴圈了~

For Loop基本上可以從小到綁定一個文字到大到綁定一正個component都是可行的，我們這邊就先舉一個簡單的例子:

//js
var loopExample = new Vue({
  el: '#loop',
  data: {
    items: [
      { name: 'First Born' },
      { name: 'SecondBorn' }
    ]
  }
})

在這邊我們定下來有一筆Data叫做: 「items」~那這個items是一個Array陣列，今天如果我們想要提取每一筆裡面的資料，並且以列表的方式顯示在HTML上要怎麼做呢?

//HTML
<ul id="loop">
  <li v-for="item in items" :key="item.name">
    {{ item.name }}
  </li>
</ul>

這樣就可以在網頁上看到一個列表像式這樣~

First Born
SecondBorn

那接下來回到Project本身

這裡發生了一件大事...我剛剛寫了三千多字一小時的東西因為不小心按到下一頁東西就都不見了
抱歉我可能得比較快速帶過了...頭疼啊!!

Data

今天我們要有很多的blog，那這些blog從哪裡來? 你可以在data裡面去寫~

data() {
    return {
      blogs: [{
          title: ....,
      },
      {
          title:.....,
      }],
    };
  },

這邊要先做一個補充~ 因為我在D19 https://ithelp.ithome.com.tw/articles/10239930才講到 vue-resource，這是拿來使用 http request 的插件~ (這邊可以預先下載，D19會在細細解釋!)

先在terminal打:
```
npm install vue-resource
```

之後去main.js 插入

import VueResource from 'vue-resource'
Vue.use(VueResource)

但我這次用了別人寫好的列表，這樣我就可以直接引進就好~ http://jsonplaceholder.typicode.com/posts

<script>
export default {
  data() {
    return {
      blogs: [],
    };
  },
  created() {
    this.$http
      .get("http://jsonplaceholder.typicode.com/posts")
      .then(function(data) {
        this.blogs = data.body.slice(0, 10);
      });
  },
};
</script>

這邊有幾點要注意:

created: 這在昨天講過~ 這是一個可以在instance建立好的時候就去fetch 你要的資料
$http.get(): 今天部會特別去講到他，但是你可以想像這就是一個如何讓本地電腦跟界聯絡的辦法，我們用它來拿取(GET)這些網路上的資料
this.blogs: this指的是自己的data，你用了GET把資料拿下來沒錯，但是我們還是要存到自己創立的一個空array裡面才可以使用!
slice(): 這就是javascript的東西~ 要拿取實個物件就好的意思

所以大致上的流程就是:
created(): 從網路上拿取資料
擷取十個物件
把他丟到本地data()裡面 (this.blogs)

應用到DOM

那接下來我們要在HTML裡面拿取這些資料~ 畢竟有時比資料在這個 **blogs[]**裡面，我們最好的辦法就是使用 v-for啦! 改一下上面的code，讓這些資料成功綁定blogs裡面的物件。

<div>
    <b-card
      v-for="blog in this.blogs"
      :key="blog.id"
      :title="blog.title"
      img-src="https://picsum.photos/600/300/?image=25"
      img-alt="Image"
      img-top
      tag="article"
      style="max-width: 20rem;"
      class="mb-2"
    >
      <b-card-text>
        {{ blog.body }}
      </b-card-text>

      <b-button href="#" variant="primary">See More</b-button>
    </b-card>
  </div>

變成這個樣子~

一樣幾個重點要看:

blog in this.blogs: 剛剛有說到 this.blogs就是我們在data裡面的那個array，因為剛剛有寫好說網路上拿下來的那十個物件要存放到this.blogs裡面，所以現在直接拿就好!
blog: blog就是我們自己創的一個指標，他代表著在我們blogs裡面的每個物件，就是他會在每次尋訪的時候把每個物件都叫做blog來處理~
所以blog應該會長得像這樣

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },

:title: 這個冒號就相當於v-bind的意思，綁定了每一個blog裡面的title
而{{blog.body}}就不用介紹了吧XDXD~我們最熟悉的資料綁定方法!

網站打開來就會看到