How laravel livewire supports two way binding

Suppose you have a simple form where a user can enter their name, and you want to display a greeting message based on the entered name. Here's how you can achieve this using Livewire:
2 way binding

filling form by enter their name
at same time display a greeting message based on the entered name

Create a Livewire Component: First, create a Livewire component to handle the form and the greeting message. You can do this by running the following Artisan command:

php artisan make:livewire GreetingComponent

This command will generate a new Livewire component named GreetingComponent in the app/Http/Livewire directory.

Define Properties: Within the GreetingComponent class, define properties to hold the state of your application. In this case, you'll need a property to store the user's name. Update the GreetingComponent.php file as follows:

// app/Http/Livewire/GreetingComponent.php

namespace App\Http\Livewire;

use Livewire\Component;

class GreetingComponent extends Component
{
    public $name = '';

    public function render()
    {
        return view('livewire.greeting-component');
    }
}

Create a Blade View: Next, create a Blade view file to define the user interface for your Livewire component. Create a file named greeting-component.blade.php in the resources/views/livewire directory and define the form and the greeting message:

<!-- resources/views/livewire/greeting-component.blade.php -->


<div>
    <form wire:submit.prevent="submitForm">
        <label for="name">Enter your name:</label>
        <input type="text" id="name" wire:model="name">
        <button type="submit">Submit</button>
    </form>

    @if ($name)
        <p>Hello, {{ $name }}!</p>
    @endif
</div>

Handle Form Submission: Define a method to handle form submissions in the GreetingComponent class. Update the GreetingComponent.php file as follows:

// app/Http/Livewire/GreetingComponent.php

namespace App\Http\Livewire;

use Livewire\Component;

class GreetingComponent extends Component
{
    public $name = '';

    public function submitForm()
    {
        // Handle form submission here
    }

    public function render()
    {
        return view('livewire.greeting-component');
    }
}

Within the submitForm method, you can handle the form submission logic, such as saving the user's name to a database or performing any other required actions.

Now, when you navigate to a page where you include the GreetingComponent, you'll see a form where users can enter their name. As they type their name, the greeting message will update in real-time thanks to Livewire's two-way binding mechanism. Additionally, when the form is submitted, the submitForm method will be invoked, allowing you to handle the form submission logic within your Livewire component.
Another Example

<div>
    <input type="text" wire:model="todo">

    Todo character length: <h2 x-text="$wire.get('todo').length"></h2>
</div>

<div>
    <input type="text" wire:model="todo">

    <button x-on:click="$wire.todo = ''">Clear</button>
</div>