iT邦幫忙

livewire相關文章
共有 34 則文章
鐵人賽 Modern Web DAY 2

技術 Day 02 | Laravel Livewire 基本介紹

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

鐵人賽 Modern Web DAY 1

技術 Day 01 | 前言與賽程

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 8

技術 Day 08 | 觸發事件

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

鐵人賽 Modern Web DAY 4

技術 Day 04 | 渲染元件

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 11

技術 Day 11 | 嵌套元件(二)

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 7

技術 Day 07 | 互動事件

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 10

技術 Day 10 | 嵌套元件(一)

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

鐵人賽 Modern Web DAY 27

技術 Day26 | 很像 Vue 的 AlpineJS(一): x-data

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 18

技術 Day 18 | 常用範例:表格分頁 Pagination 前後端做好只需三分鐘!?

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 29

技術 Day 28 | 很像 Vue 的 AlpineJS(三): x-model

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 14

技術 Day14 | 元件狀態:離線 Offline

Livewire 可以讓在網頁離線的時候,顯示或是更改相對應的元素,雖然內容比較輕鬆,但有需要處理網站離線/斷線時也是可以省下不少手動處理的功夫。 官方文件 D...

鐵人賽 Modern Web DAY 30

技術 Day 29 | 很像 Vue 的 AlpineJS(四): x-on

x-on x-on 可以簡單的用從 DOM 中來觸發事件,像是最常用的按鈕: <button x-on:click="alert('Hello...