大家好, 我是yangyang.今天带来laravel新项目livewire(star 21.6k)推荐给大家.

介绍

Livewire 是 Laravel 的全栈框架, 构建下一个网络应用程序的最有效方法, 是一种仅使用 PHP 构建动态、反应式前端 UI 的强大方法。Livewire 非常适合主要使用 Blade 模板并正在寻找 Vue 和 React 等 JavaScript 驱动的 SPA 框架的更简单替代方案的团队。

安装

版本要求

>= Laravel10
>= PHP8.1

命令

composer require livewire/livewire

创建一个组件

Livewire 提供了方便的 Artisan 命令来快速生成新组件。运行以下命令来创建一个新Counter组件：

php artisan make:livewire counter

`app/Livewire/Counter.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— 声明一个名为、初始值为 的公共属性1。
public function increment()— 声明一个名为 的公共方法，每次调用increment()该方法时都会递增该属?性。$count可以通过多种方式从浏览器触发此类公共方法，包括当用户单击按钮时。
public function render()— 声明一个render()返回 Blade 视图的方法。该 Blade 视图将包含我们组件的 HTML 模板

编写视图

打开该resources/views/livewire/counter.blade.php文件并将其内容替换为以下内容：

<div>
  <h1>{{ $count }}</h1>

<button wire:click="increment">+</button>

<button wire:click="decrement">-</button>

</div>

此代码将显示属性的值$count以及两个分别递增和递减属性的按钮$count。

Livewire 组件必须有一个根元素

为了让 Livewire 工作，组件必须只有一个元素作为其根。如果检测到多个根元素，则会引发异常。建议使用<div>示例中的元素。 HTML 注释算作单独的元素，应放置在根元素内。渲染全页组件时，布局文件的命名槽可能会放在根元素之外。这些在组件渲染之前被删除。

#为组件注册一个路由

在 Laravel 应用程序中打开该routes/web.php文件并添加以下代码：

use App\Livewire\Counter;
Route::get('/counter', Counter::class);

现在，我们的计数器组件已分配给/counter路由，以便当用户访问/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 及更高版本会自动注入所需的任何前端资源。

四时宝库

程序员的知识宝库

Laravel 的全栈框架，消除了构建动态 UI 的痛苦-livewire

介绍

安装

编写视图

#为组件注册一个路由

创建模板布局