Livewire 中文文档快速开始
快速开始
安装 Livewire
引入 PHP。
composer require livewire/livewire引入 JavaScript（在每个使用 Livewire 的页面上）。
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>创建组件
运行以下命令生成一个名为 counter 的新组件。
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>让我们向视图中添加一些文本，这样我们就可以在浏览器中看到一些有形的东西。
Livewire 组件「必须」具有单个根元素。
resources/views/livewire/counter.blade.php
<div>
<h1>Hello World!</h1>
</div>引用组件
类似 Blade 组件一样引用 Livewire 组件。您可以在 Blade 视图中的任意位置插入 <livewire:some-component /> 以渲染 Livewire 组件。
<head>
...
@livewireStyles
</head>
<body>
<livewire:counter />
...
@livewireScripts
</body>
</html>在浏览器中查看
在浏览器中加载您引用了 Livewire 的页面。您应该看到 Hello World！。
增加「计数器」功能
使用以下内容替换 counter 组件默认生成的类和视图的内容：
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 工作方式的最佳方法之一。
关于 LearnKu
粤公网安备 44030502004330号