分享每一天-laravel-livewire减少开发者构建网站动态界面时的痛苦的开源项目

PHP 2250 0 创建时间：2020-07-14 21:20:34

laravel laravel-livewire

#### livewire/livewire

这是一个专门针对 Laravel 开发的一个全栈框架，主要目的是为了减少开发者构建网站动态界面时的痛苦，提升网站开发速度。

##### https://github.com/livewire/livewire

正如作者一开始设想的一样，这个开源项目一炮而红，吸引了不少 Laravel 开发者的关注。与此同时他也知道，用爱发电总归是难以持久的，所以他借助了 GitHub 的赞助商功能，开始接受来自全球各地开发者的馈赠。

终于，在 2019 年 12 月 12 日的时候，作者收到了来自下面这位开发者的第一笔赞助（24 刀/月）。

后续，越来越多的开发者对作者提供了慷慨赞助。截至今天发帖时，作者通过该开源项目的赞助费用，已达到月入 9390 美元，换算成当前人民币汇率，年收入就是 80w！

#### 安装Livewire

```php
composer require livewire/livewire
```

包括JavaScript（在将要使用Livewire的每个页面上）。

```php
...
    @livewireStyles
</head>
<body>
    ...

@livewireScripts
</body>
</html>
```

#### 创建一个组件

运行以下命令以生成一个名为的新Livewire组件counter。

```php
php artisan make:livewire counter

```
运行此命令将生成以下两个文件：
```php
文件位置 :  App\Http\Livewire\Counter;

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

---------------------------------------------------------------
文件位置: 资源/视图/Livewire/counter.blade.php

<div>
    ...
</div>
```
让我们向视图中添加一些文本，以便在浏览器中看到有形的东西。

**注意:   Livewire组件必须具有单个根元素。**

```php
<div>
    <h1>Hello World!</h1>
</div>
```

#### 包括组件

考虑一下Blade包括的Livewire组件。您可以@livewire 在视图中的任何位置插入，它将呈现。

```php
<head>
    ...
    @livewireStyles
</head>
<body>
    <livewire:counter>

...

@livewireScripts
</body>
</html>
```

#### 在浏览器中查看

在浏览器中加载您包含Livewire的页面。您应该看到“ Hello World！”

#### 添加“计数器”功能

将生成的counter组件类内容替换为以下内容：
```php
class Counter extends Component
{
    public $count = 0;

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

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

-----------------------------------------------

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

#### 快速开始:
文档说明:https://laravel-livewire.com/docs/2.x/quickstart