从 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，哈哈哈哈！