Episodes
01. Introduction
47s
0%
02. Installing and x-data
3m 57s
0%
03. Visibility
5m 21s
0%
04. Model
7m 9s
0%
05. Project - Image finder
6m 35s
0%
06. More inputs
10m 25s
0%
07. Attribute binding
7m 46s
0%
08. Attribute binding examples
13m 22s
0%
09. Text and HTML
3m 3s
0%
10. Project - Markdown parser
3m 53s
0%
11. Looping
10m 59s
0%
12. x-show vs x-if
5m 57s
0%
13. Event handling
12m 2s
0%
14. Project - Modal with custom events
10m 35s
0%
15. $el
4m 45s
0%
16. Watching
5m 13s
0%
17. Project - Hackernews search
8m 10s
0%
18. Refs
7m 45s
0%
19. Cloak
2m 46s
0%
Transcript
00:00
OK. So let's go ahead and get Alpine pulled in in this part. And we'll output a really simple hello world example
00:05
just to get us started. So if you come over to the Alpine.js home page, you'll see that there's a script just here. It's fine if you want to pull that in.
00:13
What I recommend you do is come over to the installation section here and pull in the specific version that you need. What that means is if there are any changes in version 3, they're not going to immediately break your code.
00:26
So here you can see the example of pulling in 3.1.1. Let's go ahead and just pull in this for now, the home page, just to get us started. It's a little bit easier.
00:35
And let's come over to this index.html page, get a really basic document layout here, and just put this in the head of the document. That is Alpine installed.
00:45
If we go ahead and open this up here, literally nothing has changed. We just have Alpine pulled in on the page. So what we're going to do is talk about Alpine components.
00:54
We can register multiple Alpine components on a page. And these are just the small pieces of your application that use Alpine functionality. So for example, this could be a div, it could be a header,
01:07
could be an input, pretty much anything that you can put on your documents. So what we do to initialize Alpine is use xdata. Now, this doesn't have to have an object.
01:19
You can literally just use xdata on its own. What we now have is an Alpine component on the page, of course, with nothing in there at the moment. So that's the kind of fundamental initialization
01:30
of this component. Now, inside of xdata, what we have is an object. And this can contain properties. It can contain functions.
01:38
So you can pretty much put anything you like inside of here. For example, we could have just a piece of text, like hello. And we could assign that the value world. Now, what we could do inside of here is access that,
01:50
modify that, use that to render something out conditionally. And normally, you would do that with Boolean values. But in our case, we just want to output this string inside of here.
02:00
Now, normally, when we output things within frameworks, JavaScript frameworks, we would perhaps use curly braces here to output the value that we wanted.
02:10
We don't do that in Alpine. What we do is instead create out another element, really just depending on what kind of data you're working with.
02:17
And then we use the xtext directive in here. And we go ahead and reference the value that we want to see. What we'll see in here, if we just give this a refresh, is world.
02:28
We don't see that at the moment, just because we want to go ahead and prefix this with HTTPS. And there we go. Alpine is actually pulled in now.
02:37
And we see the value of that property inside of here. Now, anything inside of xtext, we'll speak about this later. And we'll dive into more complex examples. This could be an expression if you wanted it to be.
02:49
So for example, you could concatenate on something else into here. So for example, if we go and give that a refresh, we see that that's concatenated in.
02:59
So this can be an expression as well. You could even add two numbers inside of here if you wanted to and get the result. Doesn't really matter what you put in here.
03:06
But usually with xtext, we would use this to reference a value that we have stored inside of xdata to output a piece of information. Now, inside of here, like I said, you can have functions.
03:17
You can have just plain properties. You can even have getters, which we'll talk about later as well. But what we would normally think about doing is doing this all in line because it's an attribute
03:28
almost inside of this element. What instead we would usually do is just pull this down so it's a little bit neater to work with. So I could just pull this down like this.
03:37
Might look a little bit messy, but you get the benefit of having this like a normal object that you would split down on multiple lines. So if you had some function inside of here
03:47
that did something, it looks a lot cleaner to do it like this. For now, though, that is Alpine installed and a really basic example of outputting a piece of information.
19 episodes•2 hrs 10 mins•2 years ago
Overview
Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.