One common thing you want to do is bind the value of an input element to a data value.
Say you have an input field where people can write their name into. You can bind its value to the name variable defined in x-data:
<div x-data="{ name: '' }">
<p>Your name:</p>
<input x-model="name" />
<hr>
<p>Your name is
<span x-text="name"></span>
</p>
</div>

Lessons in this unit:
| 0: | Introduction |
| 1: | Installing Alpine |
| 2: | The basics of Alpine |
| 3: | Events |
| 4: | Defining data |
| 5: | Looping |
| 6: | ▶︎ Binding user input to variables |
| 7: | Watching variables change |
| 8: | Stores |