Alright, let's get started with data binding. So imagine you want to bind the text content of an h1. We could create an object here using x-data. So behind the scenes, Alpine's going to hunt down all elements that have that attribute defined. So you can think of each occurrence of that as a component of sorts. Let's create some data here. How about a message property called hello-world? Now I'm going to bind the text of this h1 equal to the value associated with the message. So notice all of these Alpine-specific attributes.

Now I'm going to bind the text of this h1 equal to the value associated with the message. So notice all of these Alpine-specific attributes. x-data, x-text, x-show, x-for, there's all sorts, and you'll learn them pretty quick. Alright, so if we view this in the browser, I will use an inline one here, sure enough, the h1 says hello-world. Okay, let's continue. Maybe we have a button, and when you click on that button, I want to change the message to something else. I can use x-on:click = and then I provide an expression. Alright, let's get it to work, and then we'll talk about it.

I can use x-on:click, and then I provide an expression. Alright, let's get it to work, and then we'll talk about it. I click on the button, we update message, and as a result, Alpine detects the change and then re-renders the DOM. Kind of cool, isn't it? Very similar to what you might experience with Vue or Angular. Now in this particular case, there is a shorthand. x-on is equivalent to the at symbol. And this is what you'll often see me use in this series, but just remember, they're functionally identical.

One more time, refresh, and it works. Then again, this is what I will typically do. However, notice when I change this input, it's one-way. So we're changing the value of input, but we're not changing the value for the underlying message property. However, often you'll want to do that. To fix this, we can reach for x-model. So what this effectively says is, yes, I want to bind the value of the input to message. However, it also says, when an input event takes place, like typing into it, I also want you to update this property equal to the new value of the input.

But for now, just think of it as being for your inputs, your text areas, your checkboxes, your selects, things like that. It allows for two-way binding. So let's finish up with a very basic calculator. We'll build the world's most basic calculator. You give it a firstNumber, we'll default to 0, and then a secondNumber, and then we calculate the result. So basic. So we can use x-model here to bind the input's value to the firstNumber, and we'll say that firstNumber plus secondNumber equals the result.

So we can use x-model here to bind the input's value to the first number, and we'll say that plus the second number equals the result. Now think about it. Your first thought, and this isn't going to work, but your first thought might be, well, getFirst plus second, and output the result. Now if you think about it, it's not quite going to work because we are dealing with strings. So in this case, we expect 2 plus 0 to equal 2, but it comes out 220. And that's because we're really adding the string 2 plus the string 0, and that means they'll be concatenated.