Livewire 中文文档快速开始
快速开始#
为了开始您的 Livewire 之旅，我们将创建一个简单的 “计数器” 组件并在浏览器中渲染它。这个示例是您第一次体验 Livewire 的绝佳方式，因为它以最简单的方式展示了 Livewire 的实时性。
环境条件#
在开始之前，请确保您的开发环境符合以下条件：
- Laravel 10 以上
- PHP 8.1 以上
安装 Livewire#
在您的 Laravel 应用程序的根目录运行以下 Composer 命令：
composer require livewire/livewire创建 Livewire 组件#
Livewire 提供了一个方便的 Artisan 命令，可以快速生成新的组件。运行以下命令即可创建一个新的 Counter 组件：
php artisan make:livewire counter这个命令将在您的项目中生成两个新文件：
App/Livewire/Counter.phpresources/views/livewire/counter.blade.php
完善组件类#
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 1;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}对上面的代码做一个简单的解释：
public $count = 1;— 声明一个名为$count的公共属性，初始值为1public function increment()— 声明一个名为increment()的公共方法，每次调用时都会增加$count属性的值。像这样的公共方法可以通过多种方式从浏览器触发，包括当用户点击按钮时。public function render()— 声明一个render()方法，该方法返回一个包含组件的 HTML 模板的 Blade 视图。
完善视图模板#
打开 resources/views/livewire/counter.blade.php 文件，并替换为以下内容：
<div>
<h1>{{ $count }}</h1>
<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>
</div>这段代码将显示 $count 属性的值以及两个按钮，分别用于增加和减少 $count 属性的值。
注册路由#
打开您的 Laravel 应用程序中的 routes/web.php 文件，并添加以下代码：
use App\Livewire\Counter;
Route::get('/counter', Counter::class);现在，我们的计数器组件已分配给 /counter 路由， 访问浏览器即可渲染此组件。
创建模板布局#
在您访问 /counter 之前，我们需要一个用于组件渲染的 HTML 布局。默认情况下，Livewire 将自动查找名为 resources/views/components/layouts/app.blade.php 的布局文件。
如果该文件不存在，您可以通过运行以下命令来创建它：
php artisan livewire:layout这个命令将生成一个名为 resources/views/components/layouts/app.blade.php 的文件，内容如下：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
</head>
<body>
{{ $slot }}
</body>
</html>计数器组件将在上面模板中的 $slot 变量所在位置渲染。
您可能已经注意到，Livewire 没有引入任何 JavaScript 或 CSS 资源。这是因为 Livewire 3 及以上版本会自动注入它所需的任何前端资源。
测试#
现在我们的组件类和模板都准备好了，可以进行测试了！
在浏览器中访问 /counter ，您应该会看到屏幕上显示一个数字和带有两个用于增加和减少数字的按钮。
在点击其中一个按钮后，您会注意到数字会实时更新并且页面不会重新加载。这就是 Livewire 的魔力：完全使用 PHP 编写的动态前端应用。
到此为止，我们只是触及了 Livewire 很小一部分的功能。继续阅读文档可以了解 Livewire 提供的更多功能。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：