Getting Started with Vue Exercise

[00:00:00]
>> And so what we'll be doing today as far basically going forward for the rest of the workshop, you can find all the different snapshots of where we start and stop inside of the individual branches. And so basically 01-begin, let me go ahead and add everything. So check, take status, what do we change?

[00:00:16]
We change the playground, and so the playground was for me, so let me go ahead git, feature: add live coding for essentials. Let's see, reactive data in playground. Okay, so I'm gonna push that up, oop, git push, I haven't got this yet, let's do this real quick. All right, great, and so check out 01-exercise git push origin 01-exercise.

[00:00:49]
Okay, so if you go ahead and pull down the latest changes now, you should be able to see all the stuff that I did inside of the playground. Now, of course, I saw that some people were coding along, which I was really happy to see. But of course, we're gonna actually give you a chance to actually practice that on your own without any guidance.

[00:01:06]
So the way that's gonna work, is what you to do is choose your favorite TV show, or if you don't watch TV, try movie or basically anything that is personal to you. And basically use the index.html page that we have in there that's already ready for you to play around with.

[00:01:22]
And I want you to go ahead and replicate what we just did as far as go ahead and create that app, create a view app using the CDN. Add some reactive data tracking to track maybe some characters on the show and whatnot. I want you to practice using the v-if, v-for.

[00:01:36]
So v-if to basically track if there are no characters. This should show some sort of text element that says, hey, no characters. And then when it populates it, it swaps it out. And then go ahead and drop in as much reactive data as you want. Again, play, have fun with this, and yeah.

[00:01:54]
So from my end, I'm gonna go ahead and open up index.html as you all did. And for me, I'm gonna go ahead and do Avatar The Last Airbender, that's the one I'm gonna do. And so inside of here, we're gonna go ahead and copy over the CDN include, That I used earlier.

[00:02:16]
And then from here, we'll go ahead and we'll start setting up the app. So again, the convention here is div, id-"#app". And the reason for this is because typically the frameworks will go ahead and render a bunch of stuff in there. So the div, it doesn't have any semantic value as far as from the screen readers and that kinda thing.

[00:02:34]
So that's why the convention is usually to use a div. But if for whatever reason you wanna attach it to something else, by all means, feel empowered to do so. Okay, so what do we say? We're gonna create some data, so let's say const (createApp) = Vue. And actually, I'm gonna do just for the sake of showing you the div, that they're the equivalent.

[00:02:56]
We can basically do Vue.createApp, like this, and then this can be a data function. Now ,I'm gonna show you a new syntax that I personally I prefer to use, which is that I'll use the arrow function for basically assigning a function to data, and then I'll wrap the object in the parentheses.

[00:03:13]
So it basically saves a couple lines of code. So just to split, show the difference on that real quick, You'll see here this is the difference, right, data with a parenthesis, then the actual explicit return. This has the implicit return with the arrow, and then we can find our data here.

[00:03:31]
So here, I can do my characters like this, and then I'll go ahead and collapse this now so that we have the single column. Okay, so then we'll have four objects. So actually, I'm gonna go ahead and do real quick, this is 1, 2, 3, 4. I'm gonna use a multi-cursor select by holding down Cmd, might be Ctrl for Windows.

[00:03:52]
And then I'll just open up basically an object so that I don't have to do that multiple times. Great, and then let's just save that real quick, sort of auto-format. Once again, let's click through and let's add some properties. So we'll have basically the name of the character, and that's basically it.

[00:04:07]
So in this case, we have Aang, we have Zuko. We have Toph, and we have Katara. All right, So first thing first, we're gonna do now is let's go ahead and actually render out our empty state. So the way we can do that is we're gonna do a p element and say, there are no characters.

[00:04:31]
And so we'll save this right now and let's go ahead and actually open this up inside of the browser. So instead of playground, we'll go to index. There we go, there are no characters. And then we'll have the ul here. And just like before, we will practice now the v4 element that we had.

[00:04:48]
So for every character in characters, although actually this is surfacing a philosophical point that I like to do when it comes to naming things. One off errors are very common in programming and I find that happens a lot with spelling too. And so the one s plural has caught me in multiple times.

[00:05:05]
So personally, I usually like to just say that it's a list. It's a little bit longer, but then you just have that visual distinction. It's a character in characterList, and then I can just render out character.name, which is great. Although, hmm, what's happening here, why is not it working?

[00:05:20]
This is a common mistake that we often make when we're sort of creating the app this way, is because what we have to remember to do is we need to tell Vue that we need to mount it. So we're gonna go ahead and run the mount command on this, and we're gonna mount it to the id app.

[00:05:34]
And once we do that, save, refresh. I broke something. Warn selector, why is that the case? Well, typos, didn't I say something about one off errors right here? This is one that'll catch you off guard, because in your mind you're thinking CSS selector, but you don't need the extra hashtag symbol.

[00:05:55]
Hey, there we go, everything's working. So now, all we gotta do, though, is complete the exercise by saying if characterList.length === 0, then show that, otherwise show this, okay? As you can see, boom, there we go, it's working. If we go ahead and just go ahead and update that real quick, you'll see there are no characters showing up.

[00:06:20]
Now, something worth noting about the v-if directive though is that when you use the v-if directive, what Vue is actually doing is, if you take a look here, Is that the ul that you have here for the else condition does not even exist on the DOM. So basically, the elements are being destroyed and recreated each time you toggle that.

[00:06:43]
So as you can see here, now if we take a look at the app, you'll notice here that the ul's precedent that the p tag is gone. And so, this is contrary to another directive that you will see in Vue called v-show, which is, I'll say, its less popular cousin.

[00:06:59]
And that's because what v-show does is it toggles the visibility of the element via CSS. And so the reason you want those two different approaches is because there are times where there might be a performance bottleneck of destroying a list of thousands of items. And then having the DOM recreated every time someone toggles it on and off, and you might just wanna show or hide it.

[00:07:20]
So that's where v-show, v-hide could be very useful in those regards. So once again, the idea here, building on what we know and trying to make it easy for us to do the right performance optimization. So that's a trade-off to consider when using v-if. But again, I'd say 95% of the time, that is what you wanna use.

[00:07:38]
But the moment you start thinking, users are gonna be toggling this a lot and it might be expensive to destroy it, reach out for v-show.