Livewire 是 Laravel 的全端框架，能建立像 Vue 一樣的動態頁面的同時又能保有 Laravel 原有的特性。除此之外在 SEO 方面仍跟原本...
昨天提到了互動事件（Action）基本上能解決大部分頁面中互動的需求，但若要能夠跨元件來進行互動，例如呼叫其他元件中的 Function 就要靠今天的 $emi...
今天要介紹的功能 Polling ，用Google 翻譯出來是「輪詢」，不過這個詞並不常見就是了，大致上可以想像成是每一段時間執行一次，像是 JavaScrip...
今天的範例是超級無敵常用，有用到表格就一定會有的 分頁（Pagination），從零到有不用三分鐘！！！ 如果原本是寫 Vue 的夥伴，Livewire 可以讓...
實作了商品細節頁之後就要把商品加進購物車啦，今天會把要買的東西存進 Laravel 的 Session 中。那就來看看怎麼做吧！ 今日目標：加入購物車 ㄧ、刻一...
安裝並部署 Livewire 的步驟沒有很多，照著做不用三分鐘就能完成囉！今天一樣是照著官方文件帶大家做一次囉～ 安裝 Livewire 官方文件 首先要先安裝...
從 2018 年介紹 Vue 的 UI Framework — Quasar ，到前年的 LINE Bot。 每年鐵人賽都剛好是工作最繁忙的下半年，希望下次能辦...
要渲染 Livewire 元件也非常簡單，主要會分成兩種常用的方法，以下會分別對照 官方文件 來做示範。 作爲元件引入 作為頁面中的元件引入使用，可以當作輸入表...
延續昨天的內容，在昨天理解完 mount() 後，今天就開始來對資料進行操作吧！！ 資料綁定 如果用過 Vue 對這個一定已經很熟悉。如果沒用過那這個也非常容易...
互動事件顧名思義，就是前後端之間的互動啦！現在要從頁面上觸發後端的 Function 不用在自己寫 JavaScript 然後用 AJAX 去幫你觸發啦，也不用...
今天的內容是頁面前後端資料傳遞，這個部分跟前面相比來說簡單許多也比較直覺話。如果以前有寫過 Vue.js 的朋友應該會對這個方式非常熟悉，但又稍微的一點點不一樣...
使用 Livewire 之後，在 Layout 上會改用 component 的 $slot 方式來綁定 Livewire 渲染的畫面。這項改動會導致原本 Co...
Livewire 大致上功能都已經介紹完了，接下來就是一些常用的實作時間啦！！今天要來做最常會遇到的 表單驗證 功能！！以往這個功能在使用者輸入了格式錯誤的資料...
有了商品列表，那應該要能點進去看商品的細節吧。所以今天就是來做點進去後的商品細節頁！ 今日目標：商品細節頁 ㄧ、先刻畫面吧！ 因為是範例我們一樣也是先參考別人的...
嵌套元件（Nesting Components），在 Vue.js 中是很普遍的用法，可以在父元件賦予數值給子元件進而改變子元件顯示的資料。實作中通常會將可重複...
本來是沒打算分成兩天的。但第一天放入了程式碼讓文章看起來比較冗長，所以只好拆兩天啦！今天一樣也是 嵌套元件 Nesting Components 的部分。昨天在...
在 Vue.js 有的生命週期在 Livewire 中也都有，除此之外在 Livewire 中各自變數也有各自的生命週期，讓你能更方便的對各個變數週期事件單獨做...
如果還是比較習慣 Vue.js 的方式，像是 @click、v-model、v-if 之類的，換到 Livewire 後非常不習慣的話。那可以試試看 Alpin...
購物網站能加入購物車後，就只剩結帳功能啦！！不過串接金流的方面與本主題較無關，所以這邊只會做完結帳的頁面，並可以刪除不要購物車的項目。 今日目標：結帳頁面 第一...
先祝各位中秋節快樂～連假過後該收心了所以今天就來做一個待辦清單吧！順便熟悉一下 Livewire 的使用方法，這裡會依照功能拆成三天來做。 需求規劃 首先先預想...
今天來做第二個實作：購物網站。這也是很容易遇到的專案類型，照原本的做法做一個購物網站都要花費大量的時間在處理頁面與資料間的溝通，透過 Livewire 能讓開發...
本來預計都寫在 Day22 的，但是加上本篇內容後會讓一天的篇幅太長，且考慮到有些夥伴可能沒有建立資料表的需求。因此資料建立方面獨立開一篇來做解說，之後的內容接...
在 Livewire 上的操作都會透過 AJAX 將資料往返與前後端之間，有些較長的請求可能不會即時反映在頁面上，像是上傳檔案...等等。因次為了給使用者更好的...
這個問題其實在 Day8 的文章有稍微提到過，但大多數人看文件時都大致看一下而會忽略一些小細節，包含我也是 XD。且 Livewire 官方文件並沒有清楚列出避...
前面三篇關於 AlpineJs 的文章都是在控制前端的頁面而跟 Livewire 比較無關，那今天就來把 Livewire 也套進 AlpineJS 吧！！ 透...
jQuery 在大多數的專案中都不可或缺，在沒有 Livewire 之前要修改畫面都要靠它來手動更改。但使用了 Livewire 後，Livewire 的渲染機...
今天因為這兩個功能都比較簡單，因此合在一起講。分別是 預載(Prefetching) 與 延遲載入(Defer Loading)，那就來看看這兩個的功用是什麼吧...
昨天還少講了一個最最最常用到的 x-model。如同他的樣子，跟 v-model、wire:model 一樣都是拿來綁定資料用的。由於前面也有介紹過 Livew...
實作待辦事項的第三天，今天把切換日期的功能做好就完成啦！！今天會透過路由傳遞日期像是這樣 https://exmaple.com/todo?date=2021-...
如果想在資料被「污染」也就是被更改過時，想要透過新增 Class 來做特別的顯示，就可以使用 wire:dirty 來達成。這個功能比較常用在對資料的更改，例如...
RenZhou
iThome鐵人賽
看影片追技術