快速开始

未匹配的标注

快速开始

安装 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.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~