Directives

[00:00:00]
>> So just based on this, for those who have been working with web apps for a while, you might already start to realize there's a lot of flexibility with this. Cuz now, all of a sudden, if you have a backend that's not quite ready to integrate all the build tools and everything you need to get it up and running.

[00:00:14]
You can just on a specific page, when you're proposing to start progressively migrating your apps. You can say, on this page, we're gonna drop the CDN and we're gonna add the, basically, interactivity to this page, and over time, we'll migrate away. And then once we have enough pages that consolidate that Vue, then we can actually invest the time to do the build tools.

[00:00:34]
Because I think a lot of times when we think about migration, a lot of times developers are thinking, code freeze everything, no new features, and we just stop development. And we know that practically speaking, that just rarely works for business. And so this is a really great way for us to basically go ahead and migrate an enterprise app over to something that use more modern framework technologies.

[00:00:57]
Now, that said, we have a message here. Now, what if we wanted to, let's say, show or hide it based on whether or not the message is even or not? Well, something that Vue is also known for are their directives. And so for those who have come from Angular, this might look a little bit familiar.

[00:01:16]
So the way that it works is that we basically would have a normal HTML element, so let's wrap this in a p element. And then this one, we're gonna say Even, and this one we're gonna say Odd, okay? And so the idea here being that, what we'd like to do is if the message.length is even, show the Even keyword, otherwise show the Odd keyword.

[00:01:42]
And so one way we can do this is we can use something called Vue directives. And the way it works is, it's basically an attribute you add on an HTML element, and it's prefixed with v-. So in this case, if I go v-if = message.length, and I'll use the % 2 = 0 to determine that it's even.

[00:02:06]
And then otherwise, v-else, it will display the other thing. So when we refresh this, we'll see, okay, there we go, we'll notice that it is currently Odd. And so now, if I delete the exclamation mark, that should bring us over to Even. And so what we see here is, again, one of the things I talked about when it came to Vue is that it builds on top of what you already know.

[00:02:30]
And so when most people are working with HTML and CSS, there's a lot of value in extending upon people's existing knowledge when it comes to extending APIs. And so in this regard, by basically having the convention of the v-, and then using this if-else statements. Again, if you know JavaScript, in fact, you don't even need to know JavaScript, people would actually understand this property, or granted, maybe not this part.

[00:02:52]
But when people are navigating the HTML, they would actually understand what's going on here. Rather than if you had kinda big if-else blocks that have a bunch of functions in it, which again, I think sometimes we find it's a little bit tricky with, I think, sort of React components.

[00:03:06]
Those can be harder to follow, especially if you don't have as much experience with JavaScript. But this here keeps visually a semantic, concise way of telling people what's going on. Now, the other directive that I wanna talk about is this one. But before we do that, here's a slide to talk about this.

[00:03:27]
And this is a while ago from Sam Saccone, and what it says here is that 99.7% of software development in one requirement, a user should be able to view a list of items. And I still think that's incredibly relevant today, right? That's what we're doing half the time, we're talking a bunch of data, rendering out a list.

[00:03:45]
And I don't know about you all, but when I was doing this in React originally, I realized there's a lot of different ways to do it. And I know that there's more of a best practice now, but that can be confusing for users, especially if they have a function that runs the map, or maybe in this case, it uses a for loop.

[00:04:00]
There's a lot of kinda deciding what to do. And so let's go ahead and show how rendering a list works in Vue. So in this case, I'm just gonna do a list of numbers here just to keep it easy, and so 1, 2, 3, 4, 5, and we have an array here.

[00:04:16]
And then what we're gonna do here is we're just gonna do an unordered list. And then what are we trying to repeat, right? We're trying to repeat the list item. So what we're gonna have is, if you might wanna guess, is that we have the v-for directive, right, using the for loop concept from JavaScript.

[00:04:33]
And what are we looping for? For every number in listOfNumbers, we're gonna go ahead and just put the number. That's it,. And if you refresh, there you go, done. Your list is rendered, it's fantastic. And so what's really nice about this, once again, is that we are trying to extend upon people's base knowledge of JavaScript without getting too much in the weeds.

[00:05:01]
Again, the syntax is written in a way that's approachable for people to, sort of in plain English really. For number in listOfNumbers, print number, great, I understand what that means even if I don't know JavaScript. The other fun fact about the declarative rendering of the curly braces here is that it's not meant to just print out variables, it actually does evaluate JavaScript statements in there.

[00:05:21]
So if in the case of, let's say, we wanted to be really excited about the fact that it's Even, we can actually do toUpperCase in here, and run it. And then you'll see that it'll actually transform the text, it'll basically run the JavaScript inside of it immediately. So theoretically, you can also do things like, well, let's just multiply Math.random in here, and we refresh this.

[00:05:43]
Boom, I mean [LAUGH] we got some interesting numbers up here, but that's something to consider. Now, the thing about this is when people discover this, sometimes they get really carried away. And we're talking ternary statements and ternary statements. And that to me is very, I would say, anti-Vue ethos, in that we're trying to make it easy for people to understand the code base, right?

[00:06:01]
So I would say, when it comes to basically in-lining your JavaScript inside of these double curly braces, I would say, keep it to a minimum, and try to abstract that logic as much as humanly possible. So the question we have here is in regard to the differences between the Vue 2 way and the Vue 3 way.

[00:06:14]
So the Vue 3 way, as we see here, is that you can abstract a helper function from Vue. Or for those familiar with the Vue 2 way, it was new Vue, you would instantiate a new Vue app this way. And so part of the reason this approach has changed is because Vue 3 has become a lot about becoming modular and performant, in other words, being able to split apart things that you don't need.

[00:06:40]
With this sort of new Vue approach, basically, you have everything instantiated with it. And it was a lot harder from a bundling perspective, think of it from a library maintenance perspective. That was a lot of the motivation behind this new approach, which you'll see a lot more in Vue 3 code bases.

[00:06:55]
Is that there's a lot of helper functions, which we'll actually see in this workshop, that allow you to basically break apart pieces of Vue that are helpful in certain instances. And otherwise, it'll know to either drop certain things and optimize itself away.
>> I expected that v-for inside the ul instead of an li.

[00:07:11]
>> So the question here is around the idea of the v-for element being, basically, someone having the impression that they thought that they would put it on the ul element. But the reason why this is not the case is because we have to think through what exactly we want the renderer to be looping through, right?

[00:07:28]
What is the element we're repeating? And in this case, we're repeating the list in this regard, and not say it like, we don't want the entire unordered list. So for example, if we did this, you'll see, we'll just show the difference. So we can do it like this, and if we refresh it, you'll notice that, at first glance, it kind of looks the same.

[00:07:50]
But when we take a look underneath, you'll see that there are individual unordered lists happening in this case. So don't get me wrong, if in the case you have a bunch of, okay, let's just actually give that example. If in the case, we have different things that were going on in each element, okay, so 1, 2, 3, 4, 5.

[00:08:11]
So we had an object here, and let's say, name. Let me do Text Pastry 1 to 3. And then our id, let's just do Text Pastry uuid. Whoa, I need that first, Text Pastry uuid, boom, okay, save. Okay, so here we have a more complex dataset, right? We have a bunch of objects in each, and so if I refresh this now, you might notice that, well, nothing, did I mess something up syntax wise?

[00:08:42]
>> There's math on that.
>> I'm doing math, okay, that totally makes sense. All right, okay, here we go. So now if I save this, so in this particular case, maybe then inside of here, we then have a sublist. So I've realized I actually didn't even add the other thing I needed.

[00:08:59]
So we could even say, inside of here, we had another list inside of here. That was an 1, 2, 3, 4 example. Then we might say, for example, in this particular list, we want the first item to show the ID, so we say, number.id. And then we could then embed a second list, and that's where we would loop through number.list, like this.

[00:09:23]
So instead of number, I'm gonna say, switch this to item, cuz now this is more accurate. And then number in number.list, and then number like this. So then we refresh this. I broke something.
>> item.list.
>> item.list
>> item.list.
>> Number in number.list should be number in item.list.

[00:09:46]
>> Yes, [LAUGH] good catch. Okay, there we go. And so that's an example of where you might wanna loop possibly, although at that point, it might even be a div. Kinda be wondering why you'd want just the one. But consider basically how you want the semantic HTML to be rendered out at the end of the day, and that's the key thing.

[00:10:07]
Quick note before the next question, in case anyone was wondering how I sort of did the data population, that is the Text Pastry VS Code extension. That's highly underutilized, but it's really great at generating things on the fly as far as ranges, and also custom UUIDs, which is great for random data when you're doing some sandbox coding like I did.

[00:10:30]
Next question.
>> Is that data attribute in the createApp, is that required, or can we rename it to something like state?
>> So the question here is around this particular keyword data here. In this particular context, when you're passing a configuration object to createApp, this is basically a reserved keyword, in that it is called data, and that's what it has to be.

[00:10:55]
However, I will tell you right now that if you're more of a fan of calling it state, there is gonna be another style of components that we'll be covering that will allow you to basically name things as you see fit. But basically, what you're seeing here is basically a preview of what is known in Vue 2, or, well, Vue 2 and Vue 3 as the options API.

[00:11:13]
In that Vue will provide you a set of options to do what you need to do inside of your app. And those configuration and rail guards are actually, in my opinion, very powerful when it comes to people either onboarding to Vue for the first time. Or when they're looking to set a standard and consistency across their team, options API can be incredibly powerful.

[00:11:30]
But we'll show a little bit more about how that works before we get into the other one, which is composition API, which for the person who asked that question, you might be more interested in when we get to that one.