Pembangunan Laravel: Bagaimana untuk melaksanakan komponen Blade menggunakan Laravel Livewire?

Dengan Laravel menjadi rangka kerja PHP yang popular, pembangunannya menjadi lebih dan lebih mudah. Dalam ekosistem rangka kerja Laravel, terdapat banyak pakej sambungan yang sangat baik, salah satunya ialah Laravel Livewire. Pakej sambungan ini boleh melaksanakan pengalaman interaktif masa nyata dengan mudah dan sangat sesuai untuk digunakan dalam paparan Blade Laravel.

Artikel ini akan memperkenalkan cara menggunakan Laravel Livewire untuk melaksanakan komponen Blade, membolehkan anda membina aplikasi dinamik masa nyata dengan mudah.

Apakah itu Laravel Livewire?

Laravel Livewire ialah pakej sambungan PHP yang membolehkan anda mencipta pengalaman interaktif masa nyata tanpa menggunakan JavaScript. Ia menggunakan struktur sintaks PHP (contohnya, pernyataan jika, untuk gelung, panggilan fungsi, dll.) untuk membina bahagian interaktif paparan Blade.

Kelebihan menggunakan Livewire ialah anda tidak perlu menulis banyak kod logik dalam JavaScript dalam setiap fungsi. Sebaliknya, anda boleh menggunakan semula kemahiran sedia ada dalam PHP dan mengekalkan kod anda dengan lebih baik. Selain itu, Livewire mempunyai keluk pembelajaran yang agak rendah, dan ramai pembangun Laravel boleh menguasainya dalam tempoh yang singkat.

Mula menggunakan Laravel Livewire

Pasang Livewire

Memasang Laravel Livewire sangat mudah, cuma jalankan arahan berikut:

composer require livewire/livewire

Buat komponen

Laravel Livewire membolehkan kami mencipta komponen tanpa kewarganegaraan untuk dijadikan ke dalam aplikasi. Menggunakan Livewire, kita boleh mencipta komponen dan menjadikannya menggunakan sintaks Blade.

Kita boleh menggunakan arahan berikut untuk mencipta komponen Livewire baharu:

php artisan make:livewire HelloLivewire

Selepas melaksanakan arahan di atas, Laravel akan mencipta komponen baharu bernama HelloLivewire untuk kita. Ia akan mencipta fail bernama app/Http/Livewire dan paparan bernama HelloLivewire.php dalam direktori hello-livewire.blade.php.

Untuk mencapai interaksi

Kita boleh menentukan struktur HTML komponen dengan menulis kod templat Blade dalam fungsi render kelas komponen.

Dalam templat ini, kita boleh menggunakan arahan wire:model untuk mencipta pengikatan dua hala untuk sifat komponen. Ini bermakna jika pengguna memasukkan nilai ke dalam borang, nilai tersebut akan segera muncul dalam HTML yang diberikan oleh komponen tersebut. Begitu juga, jika kami mengemas kini nilai harta melalui Laravel Livewire, nilai itu akan segera ditunjukkan dalam HTML.

Sebagai contoh, mari buat komponen yang memaparkan pembilang dan menambah nilai pembilang apabila butang ditekan.

class Counter extends Component
{
    public $count = 0;

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

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

<!-- counter.blade.php -->
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">Click me</button>
</div>

Dalam kod di atas, kami telah mencipta komponen bernama Counter. Komponen ini mengandungi atribut $count, yang boleh digunakan dalam fungsi render untuk menghasilkan nilai Counter. {{ $count }}

Apabila pengguna mengklik butang, arahan

memanggil kaedah wire:click pada komponen, yang digunakan untuk menambah nilai increment. Logik ini dilaksanakan dalam pengawal Laravel, jadi hanya kod PHP perlu dikemas kini untuk melaksanakan fungsi interaktif. $ count

Render komponen ke dalam paparan Blade

Dalam langkah terakhir, kita perlu menjadikan komponen ke dalam paparan Blade aplikasi. Kita boleh menggunakan arahan

Blade untuk memaparkan komponen Livewire. @livewire

Contohnya, kita boleh menggunakan kod berikut dalam paparan

untuk memaparkan komponen welcome.blade.php yang baru kami buat: Arahan Counter

@extends('layouts.app')

@section('content')
    <div class="container mx-auto">
        <div class="my-10">
            @livewire('counter')
        </div>
    </div>
@endsection

akan berfungsi sama dalam Vue. js dan React Render komponen dengan cara yang mudah dan secara automatik menyuntik JavaScript dan CSS yang diperlukan. @livewire

Kesimpulan

Laravel Livewire ialah pakej sambungan yang sangat mudah yang memudahkan pelaksanaan komponen Blade. Ia memudahkan untuk melaksanakan interaksi yang kompleks tanpa menggunakan banyak kod JavaScript. Dengan bantuan Livewire, anda boleh membina aplikasi dengan lebih pantas, dan anda boleh meningkatkan lagi produktiviti anda dengan menggunakan kod PHP untuk membina HTML dan CSS.

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana untuk melaksanakan komponen Blade menggunakan Laravel Livewire?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!