【Laravel實戰】15分鐘Livewire快速入門

【Laravel實戰】15分鐘Livewire快速入門

安裝 Livewire

Step 1.下載套件

composer require livewire/livewire

Step 2.在會用到Livewire的頁面上去載入JS和CSS檔案

...
    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

完成之後建議開啟該頁面的原始碼模式,確認 Livewire 的 CSS 和 JS 是否正確載入,連結也都能正常訪問

如果出現 404 問題,或者是腳本無法正常載入,可以輸入指令 php artisan livewire:publish --config 來複製設定檔到 config 資料夾內。編輯 livewire.php 設定檔裏頭,將 'asset_url' 設定到 public 資料夾網址

建立組件

執行以下指令來生成一個名為 counter 的 Livewire 組件

php artisan make:livewire counter

將會生成出以下兩點檔案

//app\Http\Livewire\Counter.php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}
//resources/views/.livewire/counter.blade.php

<div>
    ...
</div>

編輯組件畫面內容

Step 1 修改組件視圖

修改counter.blade.php來加入一些文字

//resources/views/.livewire/counter.blade.php

<div>
    <h1>Hello World!</h1>
</div>

注意

Livewire組件必須要有單一的根元素

Step 2 在視圖中加入組件

你可以把Livewire組件當作是用來被include的Blade檔案,你能夠使用 <livewire:組件名 />標籤來放入 Livewire 組件,它將會自動渲染

<head>
    ...
    @livewireStyles
</head>
<body>
    <livewire:counter />

    ...

    @livewireScripts
</body>
</html>

Step 3.確認視圖

開啟瀏覽器打開該視圖連結,看看組件的內容Hello World!是否有正常顯示

Step 4.為Livewire組件加入函式

將生成的兩個組件檔案改成內容如下:

//app\Http\Livewire\Counter.php

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
//resources\views\livewire\counter.blade.php

<div style="text-align: center">
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

確認是否成功

開啟瀏覽器打開該視圖連結並重載,看看組件的內容是否有重新渲染當你按下+按鈕時應該會看到數字自動更新而不需要每次都做頁面重載,就像是魔法一樣!

總的來說,這個應用較為適合使用AlpineJS來搞定,但這是一個用來理解Livewire怎麼使用最簡單的一種實作範例


分享這篇文章:

關聯文章:

訂閱電子報,索取 Laravel 學習手冊

價值超過 3000 元,包含常用 Laravel 語法與指令!

Laravel 百萬年薪特訓營

從最基礎的 PHP 語法開始,包含所有你該知道的網頁基礎知識,連同 Laravel 從零開始一直到實戰,最後還將告訴你如何找好工作,讓你及早擁有百萬年薪