标签归档：Laravel

Livewire 快速上手教程

Livewire – 不用一行JS实现vue/ng/react等框架的数据绑定效果

理解Livewire

构建现代的Web应用程序很困难。 Vue和React之类的工具功能非常强大，但是它们增加了全栈开发人员工作流程的复杂性。

Livewire是Laravel的全栈框架，可简化构建交互式页面的过程。不用一行JS实现vue/ng/react等框架的数据绑定效果。

理解它的最好方法就是看代码。

下面构建一个搜索组件，当用户键入搜索输入时，用户列表将实时更新。

组件PHP代码：

use Livewire\Component;

class SearchUsers extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where('username', $this->search)->get(),
        ]);
    }
}

组件视图

<div>
    <input wire:model="search" type="text" placeholder="Search users..."/>

    <ul>
        @foreach($users as $user)
            <li>{{ $user->username }}</li>
        @endforeach
    </ul>
</div>

引用组件

<body>
    ...
    @livewire('search-users')
    ...
</body>

快速上手教程

教程非常简单，客户端点击一次按钮，实现客户端和服务端计数器同时加一。

安装 Livewire

composer require livewire/livewire

在视图中保护livewire的css和js

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

    @livewireScripts
</body>
</html>

新增组件

php artisan make:livewire counter

组件文件内容

class Counter extends Component
{
    public $count = 0;

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

    public function render()
    {
        return view('livewire.counter');
    }
}

组件视图

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

在视图中引用组件

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

    ...

    @livewireScripts
</body>
</html>

相关资源