What a directive is at a high level, is it is a piece of code that we place directly inside of the HTML template and it gives directions to the app component or to whatever component that it's bound to.

So what view allows us to do is to create a data connection at several different levels. We've already seen how we can call methods we've seen how we can call data attributes but we also have a number of built in directives that give some really nice behavior and they're really required for just about any kind of project that you're going to do.

Throughout this entire course we're going to be talking about directives. So I would definitely recommend that you pay attention to this one because if you do not understand directives at least at a foundational level it's going to be very hard to understand some of the more complex topics.

So when we talk about directives, anytime that you want to have a conditional inside of your view code you need a directive, whenever you want to loop through data, this has got to be one of the most common things that you do when you're building out an application.

If you get data in from an API and you want to show all of the records you got from that outside service you're going to have to loop over those and so by being able to have a directive that gives you the ability to loop over them then vue allows you to do that.

So we're going to take a base case scenario here because I think that that's really one of the most intuitive ways of learning anything but definitely directive's. So what we're going to do is we're going to come into our app element so make sure you're inside of this div.

And I'm going to create an image tag here and I'm going to access the images so if you downloaded these you can do this as well, or you can use an image from your own hard drive. And so these are stored at images/ and then I want to use the logo with margin and I'm going to get rid of the alt tag, you don't have to, I'm just not going to use it in this guide.

index.html

<div id="app">
  <h2>{{ greeting('Tiffany') }}</h2>

  <img src="images/logo-with-margin.png">
</div>

Now, if I hit refresh or if I come back here to the webpage it's refreshed, and I have this giant logo.

And so this is OK, this means that I'm able to call the image and show it, but that's not really what I'm looking to do. I want to actually control the size of this from within vue. So I'm gonna right click here and click on inspect and this is going to give me the ability to play with the size just to make sure we have what we're looking for.

So I'm going to change the width here to be 150 pixels and if I do that gives me a little bit more of the size I'm looking for at least for this example.

I'm going to clear this off and we're back to this size. So there are a few ways that we could implement this type of behavior. I could just go and hard code the value, so I can say width equals and then just say 150 and hit save, if I come back here you can see that that worked.

So we've added a image attribute style width of 150 pixels and that works. But I want our system to be more dynamic and so what I'm going to do is I'm going to use an HTML or a vue directive inside of the HTML. Now this is something that will kind of like our curly braces here on line 33.

This is a directive or this behavior is only going to work inside of the application or inside of the element that a component has been bound to. So if you tried it down here in another div it would not work. So what directive is or the syntax for it is you are going to take whatever element that you are trying to pass a directive to.

So in this case I want to override this width tag attribute, the way you can do it is by just putting a colon in front of it. And what this is going to allow you to do is to have a direct connection between this tag and our component.

So I have width add 150 but instead now I'm going to say width with the colon right in front of it and now say image width hit save and now inside of our app component right under this data element of name, make sure you add a comma there. I can now say imgWidth and then pass in a 150. Now if I save and come back you can see that this is still working perfectly.

So we have the ability by leveraging directives so by just putting this colon here this is marking this for vue and letting it know that anything that is inside of this string should not be treated like a normal string.

So all that view is doing here is it's looking for this value and then it's going to go into its list of data attributes and all these properties and it's going to look for something called imgWidth and then it's going to take that value and it's going to swap out for whatever value is in here and it's also then going to make it a regular with attributes.

So this is something I'm spending a little bit of time on but it is so important I really want this part to sink in. If you come and like we've already inspected this element but if you look at the HTML that's generated you can see that it's using the standard with attribute.

So even though we used the directive there is no colon here, it is taking the regular width attribute just in plain vanilla HTML and it's swapping in that value that we added so that is the syntax.

Now in a little bit older versions of vue, then you had a little bit of a different directive syntax. So you might have something that looked like this where it was something like a v-width, now kind of the more modern way of doing it and v-width wouldn't even work. But the more modern way of doing it is by putting a colon right in front of it.

So now any time that you see any kind of HTML code with the colon right in front of it in a tutorial or anything like that you'll know that this is a directive and it means that it's created inside this string a direct call to the component.

Resources

• Source Code