嗨起來！！！ 整個團隊卡起來！！！

LARAVEL學習 DAY 19 VUE.JS（三）

前言

略

正文

先把H*, world!的部分都砍了吧... 只是測試用的文字而已
然後非同步我覺得這種小型專案也是沒有必要用到的 所以就不去特別講了
再來就要講到Vue如何去打API了 我們會用到axios
然而呢 一個vue檔會包含（不一定都會有）三個部分
template來放你的html區塊
script來放js
style來放css
大致上就是這樣
我們先來實作index的部分 直接貼好了...

<template>
  <div class="container">
    <router-link class="btn btn-primary" to="/create">新增</router-link>
    <table class="table table-hover">
      <thead>
        <th>標題</th>
        <th>內容</th>
      </thead>
      <tbody>
        <router-link
          tag="tr"
          v-for="post in posts"
          :key="post.id"
          :to="`${post.id}`"
        >
          <td>{{ post.title }}</td>
          <td>{{ post.content }}</td>
        </router-link>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      posts: []
    };
  },
  created() {
    axios.get('api/crud').then(response => {
      this.posts = response.data.posts;
    });
  }
};
</script>

一個不小心寫得太難...
router-link是vue-router的自定義元件 其實就是一個路由跳轉的標籤
底層預設是一個<a>標籤 也可以利用tag這個prop把他改成其他的標籤 然後也是可以套css的
再來就是v-for 就好比是php的foreach 或是其他語言的for in
然後固定要帶一個v-bind:key來當唯一識別的東西
v-bind:也可以縮寫成: 就好像是v-on:click可以縮寫成@click 不過click現在沒有用到
再來就是{{ }} 這個也就好比是blade的{{ }} 基本上一模一樣...
然後每個router-link都要有一個to的prop 告訴別人該去哪裡 不過to裡面也可以有很多種形式 但是如果是number的話就會被警告...

object的話就是放name之類的別種識別方式
這邊我直接把他強制轉成string了

再來就是script的部分
data就好比是react的state 定義所需要用到的名稱跟初值
created()則是生命週期的一環
https://vuejs.org/images/lifecycle.png
上面是生命週期的圖

好了 這樣子列表的部分就完成了 還剩下... 3頁

結語

略