從 2018 年介紹 Vue 的 UI Framework — Quasar ，到前年的 LINE Bot。
每年鐵人賽都剛好是工作最繁忙的下半年，希望下次能辦在上半年啊啊啊～ 不然每天晚上都被文章追著跑 QAO
不過今年學乖了，早在看到 iThome 貼出鐵人賽開放報名的同時，這篇文章就已經誕生啦 XDD ！！

前言

Livewire 在業界的定位可能會有點奇怪，以往用 PHP 做開發的軟體公司或是接案公司，基本上只會有 後端工程師 與 網頁設計師
，後端工程師除了要把設計師寫的 HTML、CSS、JS 套到 Laravel 的 blade 內之外也要把畫面上要顯示的資料套進頁面中，幾乎可以說在資料處理方面是自產自銷。

在 Vue 開發為主的公司都是由 前端工程師 來負責整個頁面的資料佈局，後端工程師 只需要負責寫各種前端所需的 API 而不會直接接觸前端頁面的東西，至此兩者就有蠻大的差異。而 Livewire 把原本 前端工程師 要做的事通通都實現在 Laravel 上了。那究竟多了 Livewire 的專案，在頁面的部分依舊是由後端全包，還是會就此前後端分離呢？

主題與方向

這次的主題將會逐步介紹 Laravel Livewire 的基礎用法、相關應用還有與 Vue.js 的語法比較，預計會有二至四個實作的範例，也會上傳 github 方便大家能夠邊看邊做，每篇文章閱讀時長會控制在5分鐘內。

有興趣可以先去 Livewire的官方網站 晃晃啦！ 未來大致上也會依照官方文件來做解說及擴充，畢竟文件很多部分都忽略了細節，當初在寫也是把坑踩好踩滿...。

適合的閱讀對象

使用過 Laravel 及 Vue.js 的工程師們。

都沒接觸過的夥伴也沒關係，在內容中也會盡量避免使用到一些複雜或困難的語法。

其實 Livewire 頗尷尬，因為它的語法基本上都是接近 Vue 的邏輯，但拉資料時卻又要會基礎的 Laravel

所以說，到底有多少人寫 Laravel 的同時又寫過 Vue ？

範例與練習

練習與實作是學習最快的方法，因此在 Day5 之後會有一些範例提供大家實際去操作。有些天數底下也會有小習題能夠讓各位小試身手。不過裡面進度還是看到文章寫到哪邊就是了～

GitHub 連結在這邊

目次

這是目前擬定未來30天會寫的進度，不過根據情況可能會有加減天數或是調整內容也說不定
如果您對以下進度或文章的方向有任何想法都歡迎敲碗及討論哦

Livewire 基礎

• Day2 - Livewire 基本介紹
• Day3 - 透過指令建立元件
• Day4 - 渲染元件
• Day5 - 資料綁定(一)
• Day6 - 資料綁定(二) - 計算屬性 Computed
• Day7 - 互動事件
• Day8 - 觸發事件
• Day9 - Livewire 生命週期
• Day10 - 嵌套元件（一）
• Day11 - 嵌套元件（二）

Livewire 元件狀態

• Day12 - 元件狀態：讀取 Loading States
• Day13 - 元件狀態：輪詢 Polling
• Day14 - 元件狀態：離線 Offline
• Day15 - 元件狀態：修改 Dirty
• Day16 - 元件狀態：預先載入及延遲載入 Prefetch & Defer Loading

常用功能範例

• Day17 - 常用範例:：前後端共用的表單輸入驗證 Validate
• Day18 - 常用範例：表格分頁 Pagination 前後端做好只需三分鐘！？

實作一、建立一個 TodoList 待辦事項

• Day19 - Livewire 實作 Todo List（一）: 新增待辦事項
• Day20 - Livewire 實作 Todo List（二）: 完成/刪除待辦事項
• Day21 - Livewire 實作 Todo List（三）: 切換其他日期的待辦事項

實作二、建立一個購物網站

• Day22 - Livewire 實作 購物網站（一）: 建立商品列表
• Day22.5 - Livewire 實作 購物網站： 建立資料表
• Day23 - 實作 購物網站（二）: 建立商品細節頁面
• Day24 - 實作 購物網站（三）: 加入購物車
• Day25 - 實作 購物網站（四）: 結帳

Livewire 類 Vue 風格擴充 - AlpineJS

• Day26 - 很像 Vue 的 AlpineJS（一）： x-data
• Day27 - 很像 Vue 的 AlpineJS（二）： 常用屬性
• Day 28 - 很像 Vue 的 AlpineJS（三）： x-model
• Day 29 - 很像 Vue 的 AlpineJS（四）： x-on
• Day 30 - 很像 Vue 的 AlpineJS（五）： 與 Livewire 共享資料

Livewire 常見問題，絕對不是見鬼了！

• Day 31 - 常見 Livewire 問題： jQuery 在渲染時會打回原形
• Day 32 - 常見 Livewire 問題：與 Controller 兼容的幾種方式
• Day 33 - 常見 Livewire 問題：解決 Livewire.on() 沒有作用的問題

其他

• Day29 - 使用 Livewire 會踩到的坑

作者的話

以前接觸到 Vue.js 後，發現用數據控制頁面的體驗實在太棒了，光是不用操作 jQuery 去手動改 DOM 就是很棒的事。於是往後幾年的日子中，我基本沒再用 Laravel 來寫過前端頁面，寧願弄成前後端分離，也要用 Vue + Laravel API 來做網站與系統。

而碰過 Livewire 之後，我想我在 Vue.js 的旅程可以畫下終點了。畢竟現在能夠滿足我在 Vue 上的需求，而且也不用因為前後分離所以 Route 跟 Model 都要前後各寫一次，雖然 Laravel 要完全變成 SPA 還要額外透過一些套件，但其實以現階段的情況來做各式系統與網站就已經非常足夠啦！！！應該說，除了開發者，有誰會在意是不是 SPA，哈哈哈哈！