FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Directives

A directive is another way of binding data to an HTML object. In this lesson, you will learn how and when to use directives to display your data.

Useful Links

2.5 Directives

In our last couple of lessons, we've taken a look at how to use text interpolation to pull data into our HTML. On this lesson, we're gonna take a look at another way to bind data to our HTML objects, and we're gonna do that using something called a directive in Vue. A directive is simply another way to bind data. But we're gonna be doing it using a view specific attribute, instead of using this curly brace syntax that we've been working with. So you can find the URL for our starting pin here in your course notes for this lesson. Once you open that up, we'll go ahead and click on fork. And we'll be starting with where we left off in the last lesson. But now I wanna move down to the next piece of text here, our featured items. And so that's this text right here inside this h4, and this is actually in a new section now. You'll notice our featured items is not inside the main header, and the main header is what our myApp object is tied to, so this isn't gonna work for us. So there's a couple of things we could do. We could put the entire page inside another container div, and use that container div as our view instance. Or we could simply use the menu items section as a new view instance, and so that's what I'm gonna do. I'm gonna choose this second option here. I'm gonna create another view instance by creating a variable. And let's just call this myMenu, and just like we did before, we're gonna set this equal to a new instance of Vue. We have our parentheses and curly brackets. We'll put a curly bracket at the end of that, and then we need to point to the element. The element we're pointing to has an ID of menu-items, and then we need our data object. Let's do our data object a little bit differently this time. Let's create a new variable called menuData. And this is just to show you that there are multiple ways we could do that. And we’re gonna set this equal to a new object, which is opening and closing curly brackets. We’ll move that closing curly bracket down a couple of little lines, and put a semicolon at the end of it. And then inside our new View Instance, down here, after our element, we'll go to the next line. You'll notice there's a comma there. And then, we're gonna set data equal to this menu data variable that we just created up here. So now, we need to actually put some data inside that, and let's create a property here called featuredItems. And this is just gonna be a string of text that says "Our Featured Items", and we're gonna replace this with this data here. So we're pointing to this Menu-Items section, and so now, anything we put inside that Menu-Items section should work, as long as it points to a piece of data inside this data object. So lets point to featured items here. So the way we did it before, is we used this curly brackets syntax, where we had an opening and closing curly bracket, and then inside we put the name of our data property, featured-items, for example, and then that shows up. Well now, I'm gonna show you a different way to do that. I'm gonna get rid of that, and we're just gonna have an empty h4 element, and then the opening tag for this h4 element. I'm gonna create an attribute called v-text, and we're gonna set that equal to, inside quotation marks, the name of the property we want to call on, which is featuredItems. And once it refreshes, you'll see that it has the same effect as using the curly bracket syntax. The only difference is, instead of using that syntax, we're now using an attribute, or a directive, to pull in that data. And for all intents and purposes, this really just does the exact same thing, but using these directives, we can actually do a little bit more. For example, let's say we wanted some HTML inside this string here. So let's say that we wanted the word featured to be in bold. So I'm gonna add an HTML element here, a strong element, and then we'll put our closing strong element after the word featured. So only the word featured is gonna be bold. But we see that it's not working here, and we're using the v-text again. So let's get rid of our v-text directive. And once again, let's try this using the curly brackets syntax will point to featured items, and we'll see that that still doesn't work. We're not seeing our HTML interpreted as if it were HTML. It's just read as a string. Well, we can treat that like HTML by using another directive. The first directive we looked at was called v-text. Well, there's another one called v-html. And by simply changing that, you'll see that it now interprets all of the text inside this property as HTML, and the word featured is actually in bold now. So you do have a little more flexibility when using directives. As another example, let's say that we wanted to throw a CSS class on some of our text here. So let's say, for some weird reason, we wanted a button up here in our header. So I'm gonna do this using an anchor tag. So we'll just put an anchor tag here, and I'm just gonna put my button inside it. And let's go inside our CSS, and here we have a CSS rule for this class called btn. And this btn class is what's styling our buttons down here at the bottom, but let's say we wanted to style this here, and for some reason, we wanted to pull that data in through JavaScript. We wanted to pull that class name in through JavaScript, or we needed to pull it from a database, or from some other source of data. Well, one thing you might try, and remember, we're back in the header now, so we're going back up to our first view instance here. And inside of our data, let's say that we had a property called cssClass, and we're gonna set that equal to btn. And make sure that all of your properties here are separated by commas. We added commas at the end of this is number two line. So we've created this CSS class property, and we've set it equals to btn. And first of all, let's see if that class works for us. I'm just gonna type this out. I'm gonna hard code it, set class equal to btn, and it does get us where we wanna go, so that is what we want. Now, I'm gonna get rid of that, and instead of hard coding the class name here, let's try adding this curly bracket syntax. And we're going to point to cssClass, and when our page refreshes, you'll see nothing happens. It still looks like a regular link, and if we were to right click on that and inspect it, we can see what that looks like in HTML. It did not interpolate our text at all. It just left it like we typed it. And the reason for that is that you cannot use this syntax inside an attribute. If you want to pull this kind of data into an attribute, we have to use a directive called v-bind. So we're basically binding some data to an attribute. And the way that's gonna look here, is we're gonna do v-bind, and then this particular directive actually has a parameter, and the way we pass in that parameter is using a colon. So v-bind:class, we're binding the class attribute to a certain data object, or a certain data property, that we have stored down here, which is this CSS class property. So I'm gonna copy that CSS class name and just paste it inside this v-bind directive. And once we bind it, you'll see that it actually applies this CSS class, which is just the class of btn to the button. And we can right click on it and inspect it to see what it's doing. It's actually changing that. We don't see v-bind anymore. All we see is class = "btn". So again, we don't see v-bind. We don't see CSS class. Instead, all we see is class equals btn. So that's how we can pull in data into an attribute of our HTML, using this idea of directives. So, as you can see, directives are very, very powerful, and as we move forward to the next lesson, we'll see some more uses of these directives. Thank you for watching, and I'll see you then.

Back to the top