Livewire 中文文档快速开始
快速开始
安装 Livewire
composer require livewire/livewire在使用 Livewire的每个页面上引入 JavaScript 。
...
@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 呈现 Livewire 组件。
<head>
...
@livewireStyles
</head>
<body>
@livewire('counter')
...
@livewireScripts
</body>
</html>
在浏览器中查看
在浏览器中加载您包含 Livewire 的页面。 您应该看到 Hello World！。
增加 “计数器” 功能
用以下内容替换 counter 组件类默认生成的内容并查看：
app/Http/Livewire/Counter.php
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');
}
}resources/views/livewire/counter.blade.php
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
<button wire:click="decrement">-</button>
</div>在浏览器中查看
现在在浏览器中重新加载页面，您应该看到呈现的计数器组件。 如果单击“ +” 或 “-” 按钮，页面应自动更新，而无需重新加载页面。 简直跟魔法一样🧙.️
通常，像“计数器”这样琐碎的东西更适合纯 JavaScript 或 AlpineJS。 真正能体现 Livewire 的优势的是与服务器进行交互的组件。 （类似表格，数据表等）
关于 LearnKu
粤公网安备 44030502004330号