iT邦幫忙

livewire相關文章
共有 34 則文章
0 Like 0 留言 5453 瀏覽
鐵人賽 Modern Web DAY 2
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 2 篇

技術 Day 02 | Laravel Livewire 基本介紹

Livewire 是 Laravel 的全端框架，能建立像 Vue 一樣的動態頁面的同時又能保有 Laravel 原有的特性。除此之外在 SEO 方面仍跟原本...

RenZhou ‧ 2021-09-04
0 Like 0 留言 3116 瀏覽
鐵人賽 Modern Web DAY 8
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 8 篇

技術 Day 08 | 觸發事件

昨天提到了互動事件（Action）基本上能解決大部分頁面中互動的需求，但若要能夠跨元件來進行互動，例如呼叫其他元件中的 Function 就要靠今天的 $emi...

RenZhou ‧ 2021-09-10
0 Like 0 留言 2796 瀏覽
鐵人賽 Modern Web DAY 25
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 25 篇

技術 Day 24 | Livewire 實作 購物網站（三）: 加入購物車

實作了商品細節頁之後就要把商品加進購物車啦，今天會把要買的東西存進 Laravel 的 Session 中。那就來看看怎麼做吧！ 今日目標：加入購物車 ㄧ、刻一...

RenZhou ‧ 2021-09-27
0 Like 0 留言 2718 瀏覽
鐵人賽 Modern Web DAY 13
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 13 篇

技術 Day 13 | 元件狀態：輪詢 Polling

今天要介紹的功能 Polling ，用Google 翻譯出來是「輪詢」，不過這個詞並不常見就是了，大致上可以想像成是每一段時間執行一次，像是 JavaScrip...

RenZhou ‧ 2021-09-15
0 Like 0 留言 2664 瀏覽
鐵人賽 Modern Web DAY 3
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 3 篇

技術 Day 03 | 透過指令建立元件

安裝並部署 Livewire 的步驟沒有很多，照著做不用三分鐘就能完成囉！今天一樣是照著官方文件帶大家做一次囉～ 安裝 Livewire 官方文件 首先要先安裝...

RenZhou ‧ 2021-09-05
0 Like 0 留言 2598 瀏覽
鐵人賽 Modern Web DAY 18
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 18 篇

技術 Day 18 | 常用範例：表格分頁 Pagination 前後端做好只需三分鐘！？

今天的範例是超級無敵常用，有用到表格就一定會有的 分頁（Pagination），從零到有不用三分鐘！！！ 如果原本是寫 Vue 的夥伴，Livewire 可以讓...

RenZhou ‧ 2021-09-20
0 Like 0 留言 2319 瀏覽
鐵人賽 Modern Web DAY 4
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 4 篇

技術 Day 04 | 渲染元件

要渲染 Livewire 元件也非常簡單，主要會分成兩種常用的方法，以下會分別對照 官方文件 來做示範。 作爲元件引入 作為頁面中的元件引入使用，可以當作輸入表...

RenZhou ‧ 2021-09-06
0 Like 0 留言 2284 瀏覽
鐵人賽 Modern Web DAY 1
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 1 篇

技術 Day 01 | 前言與賽程

從 2018 年介紹 Vue 的 UI Framework — Quasar ，到前年的 LINE Bot。 每年鐵人賽都剛好是工作最繁忙的下半年，希望下次能辦...

RenZhou ‧ 2021-09-03
0 Like 0 留言 2176 瀏覽
鐵人賽 Modern Web DAY 6
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 6 篇

技術 Day 06 | 資料綁定(二) - 計算屬性 Computed

延續昨天的內容，在昨天理解完 mount() 後，今天就開始來對資料進行操作吧！！ 資料綁定 如果用過 Vue 對這個一定已經很熟悉。如果沒用過那這個也非常容易...

RenZhou ‧ 2021-09-08
0 Like 0 留言 1960 瀏覽
鐵人賽 Modern Web DAY 7
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 7 篇

技術 Day 07 | 互動事件

互動事件顧名思義，就是前後端之間的互動啦！現在要從頁面上觸發後端的 Function 不用在自己寫 JavaScript 然後用 AJAX 去幫你觸發啦，也不用...

RenZhou ‧ 2021-09-09
0 Like 0 留言 1879 瀏覽
鐵人賽 Modern Web DAY 5
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 5 篇

技術 Day 05 | 資料綁定(一)

今天的內容是頁面前後端資料傳遞，這個部分跟前面相比來說簡單許多也比較直覺話。如果以前有寫過 Vue.js 的朋友應該會對這個方式非常熟悉，但又稍微的一點點不一樣...

RenZhou ‧ 2021-09-07
0 Like 0 留言 1805 瀏覽
鐵人賽 Modern Web DAY 24
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 24 篇

技術 Day23 | Livewire 實作 購物網站（二）: 建立商品細節頁面

有了商品列表，那應該要能點進去看商品的細節吧。所以今天就是來做點進去後的商品細節頁！ 今日目標：商品細節頁 ㄧ、先刻畫面吧！ 因為是範例我們一樣也是先參考別人的...

RenZhou ‧ 2021-09-26
0 Like 0 留言 1801 瀏覽
鐵人賽 Modern Web
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 33 篇

技術 Day 32 | 常見 Livewire 問題：與 Controller 兼容的幾種方式

使用 Livewire 之後，在 Layout 上會改用 component 的 $slot 方式來綁定 Livewire 渲染的畫面。這項改動會導致原本 Co...

RenZhou ‧ 2021-10-05
0 Like 0 留言 1734 瀏覽
鐵人賽 Modern Web DAY 17
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 17 篇

技術 Day 17 | 常用範例：前後端共用的表單輸入驗證 Validate

Livewire 大致上功能都已經介紹完了，接下來就是一些常用的實作時間啦！！今天要來做最常會遇到的 表單驗證 功能！！以往這個功能在使用者輸入了格式錯誤的資料...

RenZhou ‧ 2021-09-19
0 Like 0 留言 1710 瀏覽
鐵人賽 Modern Web DAY 26
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 26 篇

技術 Day 25 | Livewire 實作 購物網站（四）: 結帳頁面

購物網站能加入購物車後，就只剩結帳功能啦！！不過串接金流的方面與本主題較無關，所以這邊只會做完結帳的頁面，並可以刪除不要購物車的項目。 今日目標：結帳頁面 第一...

RenZhou ‧ 2021-09-28
0 Like 0 留言 1707 瀏覽
鐵人賽 Modern Web DAY 9
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 9 篇

技術 Day 09 | Livewire 生命週期勾 Lifecycle Hooks

在 Vue.js 有的生命週期在 Livewire 中也都有，除此之外在 Livewire 中各自變數也有各自的生命週期，讓你能更方便的對各個變數週期事件單獨做...

RenZhou ‧ 2021-09-11
0 Like 0 留言 1695 瀏覽
鐵人賽 Modern Web DAY 10
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 10 篇

技術 Day 10 | 嵌套元件（一）

嵌套元件（Nesting Components），在 Vue.js 中是很普遍的用法，可以在父元件賦予數值給子元件進而改變子元件顯示的資料。實作中通常會將可重複...

RenZhou ‧ 2021-09-12
0 Like 0 留言 1683 瀏覽
鐵人賽 Modern Web DAY 11
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 11 篇

技術 Day 11 | 嵌套元件（二）

本來是沒打算分成兩天的。但第一天放入了程式碼讓文章看起來比較冗長，所以只好拆兩天啦！今天一樣也是 嵌套元件 Nesting Components 的部分。昨天在...

RenZhou ‧ 2021-09-13
0 Like 0 留言 1652 瀏覽
鐵人賽 Modern Web DAY 19
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 19 篇

技術 Day 19 | Livewire 實作 Todo List（一）: 新增待辦事項

先祝各位中秋節快樂～連假過後該收心了所以今天就來做一個待辦清單吧！順便熟悉一下 Livewire 的使用方法，這裡會依照功能拆成三天來做。 需求規劃 首先先預想...

RenZhou ‧ 2021-09-21
0 Like 0 留言 1645 瀏覽
鐵人賽 Modern Web DAY 22
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 22 篇

技術 Day 22 | Livewire 實作 購物網站（一）: 建立商品列表

今天來做第二個實作：購物網站。這也是很容易遇到的專案類型，照原本的做法做一個購物網站都要花費大量的時間在處理頁面與資料間的溝通，透過 Livewire 能讓開發...

RenZhou ‧ 2021-09-24
0 Like 0 留言 1513 瀏覽
鐵人賽 Modern Web DAY 27
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 27 篇

技術 Day26 | 很像 Vue 的 AlpineJS（一）： x-data

如果還是比較習慣 Vue.js 的方式，像是 @click、v-model、v-if 之類的，換到 Livewire 後非常不習慣的話。那可以試試看 Alpin...

RenZhou ‧ 2021-09-29
0 Like 0 留言 1441 瀏覽
鐵人賽 Modern Web DAY 12
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 12 篇

技術 Day 12 | 元件狀態：讀取 Loading States

在 Livewire 上的操作都會透過 AJAX 將資料往返與前後端之間，有些較長的請求可能不會即時反映在頁面上，像是上傳檔案...等等。因次為了給使用者更好的...

RenZhou ‧ 2021-09-14
0 Like 0 留言 1435 瀏覽
鐵人賽 Modern Web
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 34 篇

技術 Day 33 | 常見 Livewire 問題：解決 Livewire.on() 沒有作用的問題

這個問題其實在 Day8 的文章有稍微提到過，但大多數人看文件時都大致看一下而會忽略一些小細節，包含我也是 XD。且 Livewire 官方文件並沒有清楚列出避...

RenZhou ‧ 2021-10-06
1 Like 0 留言 1434 瀏覽
鐵人賽 Modern Web DAY 23
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 23 篇

技術 Day 22.5 | Livewire 實作 購物網站： 建立資料表

本來預計都寫在 Day22 的，但是加上本篇內容後會讓一天的篇幅太長，且考慮到有些夥伴可能沒有建立資料表的需求。因此資料建立方面獨立開一篇來做解說，之後的內容接...

RenZhou ‧ 2021-09-25
0 Like 0 留言 1247 瀏覽
鐵人賽 Modern Web
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 32 篇

技術 Day 31 | 常見 Livewire 問題： jQuery 在渲染時會打回原形

jQuery 在大多數的專案中都不可或缺，在沒有 Livewire 之前要修改畫面都要靠它來手動更改。但使用了 Livewire 後，Livewire 的渲染機...

RenZhou ‧ 2021-10-04
0 Like 0 留言 1208 瀏覽
鐵人賽 Modern Web
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 31 篇

技術 Day 30 | 很像 Vue 的 AlpineJS（五）： 與 Livewire 共享資料

前面三篇關於 AlpineJs 的文章都是在控制前端的頁面而跟 Livewire 比較無關，那今天就來把 Livewire 也套進 AlpineJS 吧！！ 透...

RenZhou ‧ 2021-10-03
0 Like 0 留言 1175 瀏覽
鐵人賽 Modern Web DAY 16
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 16 篇

技術 Day 16 | 元件狀態：預載 及 延遲載入 Prefetch & Defer Loading

今天因為這兩個功能都比較簡單，因此合在一起講。分別是 預載(Prefetching) 與 延遲載入(Defer Loading)，那就來看看這兩個的功用是什麼吧...

RenZhou ‧ 2021-09-18
0 Like 0 留言 1143 瀏覽
鐵人賽 Modern Web DAY 29
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 29 篇

技術 Day 28 | 很像 Vue 的 AlpineJS（三）： x-model

昨天還少講了一個最最最常用到的 x-model。如同他的樣子，跟 v-model、wire:model 一樣都是拿來綁定資料用的。由於前面也有介紹過 Livew...

RenZhou ‧ 2021-10-01
0 Like 0 留言 1059 瀏覽
鐵人賽 Modern Web DAY 20
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 20 篇

技術 Day 20 | Livewire 實作 Todo List（二）: 完成/刪除待辦事項

接續昨天的內容。昨天做完了 新增待辦事項 ，今天就來把 修改 跟 刪除 的功能給做出來吧！！ 功能三、完成待辦事項 我的規劃是 點擊 待辦事項文字就能讓這個待辦...

RenZhou ‧ 2021-09-22
0 Like 0 留言 1014 瀏覽
鐵人賽 Modern Web DAY 21
Laravel Livewire：不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ？！ 系列 第 21 篇

技術 Day 21 | Livewire 實作 Todo List（三）: 切換其他日期的待辦事項

實作待辦事項的第三天，今天把切換日期的功能做好就完成啦！！今天會透過路由傳遞日期像是這樣 https://exmaple.com/todo?date=2021-...

RenZhou ‧ 2021-09-23
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙