This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Templates" Lesson
[00:00:00]
>> Sarah Drasner: There are some things that people have misconceptions about Vue in their minds in terms of components. And one is that you have to use string templates in order to use components, that's not true. We are gonna talk about string templates because we're basically going to go from the easiest to use and the least useful to the most useful and kind of hardest to set up.
[00:00:24] But, it's kind of helpful for understanding. Vue uses HTML based template syntax to bind the Vue instance to the DOM so it's really very useful for components. Templates are optional, you can also write render functions, and there's JSX support so you can use whatever you like. But we'll start with template strings, only useful for really small.
[00:00:49] All use cases, and literally small, only a little bit of information. Then we'll go to scripts, and then to single file templates in the next section where we set up a build process that parses those. So we just can't go into Vue in that landscape without kind of looking at the way that Vue typically sets things up.
[00:01:11] So we don't actually even need a component to use a template, I think that that's worth clarifying. We could use template directly on a Vue instance if we wanted to. So I can say div ID app and here's the div here. And then in my Vue instance, I establish a relationship with the element.
[00:01:29] And I say template div, and hello Mr. Magoo. If I wanna change that to h, that's not valid markup. If I wanna change that to h1 then it will update accordingly. So that really, this template is a string that is getting put inside that gif. That's the smallest, simplest example, not very useful though.
[00:01:54] So in talking about components, now let's move over to components. I think when we're building out web applications, what ends up happening or what used to end up happening is we'd have these giant pages with so much information and so much crud. And so if you are coming in to a project cold, you are like okay, I gotta go update the header.
[00:02:16] Where is the header, where I'm I, what is going on? So I think a little while ago we kind of got used to this idea like maybe we need to abstract these little pieces. So we've got, in this instance I have got a really tiny example of header, aside, sidebar, item in items, main blog posts before post and post footer.
[00:02:39] That could be a real page and that is not lot to figure out. If I need to go update the header and I jumped into this code I'll be lik, right, okay, I'm gonna go to the header then. Or right, okay, I'm gonna go to the side bar item, and that's where I'm gonna go find that code.
[00:02:52] So it's very useful, very useful to stay productive.