Laravel Livewire v1.0 发布

英文原文 / 翻译 / 0 / 2 / 创建于 4年前 / 2 个改进

Laravel

「译者注」在官网看了一下这个框架的介绍，还是蛮有趣的。第一感觉类似于 Vue 的模式，更灵活一些。详细可以在官网查看。

Caleb Porzio 开发的 Laravel Livewire v1.0 版本今天已经发布了，Livewire 是 Laravel 的全栈框架，可简化构建动态接口的过程，且不会为 Laravel 带来不必要的麻烦。

这个版本中增加了以下内容：

集成 Turbolinks
集成 Alpine JS
支持 wire:model 监听 AlpineJS 的输入事件：$dispatch(‘input’, ‘foo’)
支持 wire:custom-event="foo" 在 AlpineJS 接受参数： $dispatch('custom-event', 'bar')。（在 public function foo($param), $param 会替换为 'bar' ）
Livewire 自定义标签语法，这类似于 Laravel 7 的 Blade 组件标签，只支持在 Laravel 7 版本中使用。

如果那你还不熟悉 Livewire，官网中简述了基本的工作原理：

Livewire 通过组件化形式输出页面，类似 Blade 模板，从而使 SEO 更友好。
发生交互时，Livewire 会向服务器发送 AJAX 请求。
服务器根据请求重新提供组件数据并发送 HTML 相应。
Livewire 根据数据内容智能刷新 DOM 更新页面。

请务必查看快速入门，这将有助于你构建第一个组件，这是快速入门指南中 Livewire 组件的后端代码：

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

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

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

这是相关的 Blade 模板：

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