Introducing Vue Directives

5:16 with Treasure Porth

Learn about Vue directives -- special instructions just for Vue that help you control how your templates should display or behave.

Teacher's Notes
Video Transcript
Downloads

Link to Placeholder Image

https://placeimg.com/200/200/animals

Terminology

Vue directive

A special attribute that you add to an HTML element in a Vue template. These are like special instructions just for Vue-- used to define certain behaviors such as when a method should be called in response to an event, or when to show/not show pieces of a UI element.

Vue Directive Syntax

Vue directives start with v-

For example: v-text, v-html, v-bind

Examples

Vue template

<p v-text="property1"></p>
<p v-html="property2"></p>
<a v-bind:href="property3">A link to somewhere </a>

Vue Instance

 new Vue({
   el: '#anHTMLElement',
   data: {
     property1: "My Property!", 
     property2: 343,
     property3: "https://www.alinksomwhere.com" 
  }
});

0:00
A Vue directive is a special attribute that you add to HTML elements in Vue
0:04
templates.
0:06
Directives are Vue's way of applying certain behaviors or
0:09
attributes to elements.
0:11
You can think of them as special instructions for Vue.
0:15
For example, rather than use Mustache syntax on my h1 element,
0:20
I could bind my title data to the element like this,
0:26
Using a directive called v-text.
0:30
So using the directive v-text,
0:33
I'm passing in the data property title from here
0:41
So now if we save and refresh, we'll just see Hello.
0:45
This particular directive works pretty much the same way as Mustache syntax.
0:49
The v-text directive tells Vue to keep this each one element updated with
0:53
whatever the value of title is.
0:56
Remember, we're keeping track of the value of title in our Vue instance.
1:00
So if at some point the title changes,
1:02
Vue will automatically change the title in the template.
1:06
Mustache syntax is often preferable when you're only changing one portion of data
1:10
in an element.
1:12
For example,
1:13
if you wanted to display a greeting where only the name changes dynamically.
1:20
So here I could put something like,
1:23
Hello again, and then title using Mustache syntax.
1:33
And then I could change title to whatever I want to.
1:42
You can also bind a piece of data to an HTML attribute using a directive called
1:46
v-bind.
1:48
It's called v-bind because you use it to bind a piece of data to your template.
1:52
For example, I'll show you how to use v-bind to dynamically bind source and
1:57
alt attributes to an image.
1:59
In app.js, I'm going to nest a new object within my data object called image.
2:09
And my image property will contain two properties,
2:13
source, And alt.
2:20
I'll set the source to a URL from a website that provides placeholder images.
2:25
If you're following along with me, you can copy and
2:27
paste the link from the Teacher's Notes.
2:34
Finally, I'll add a short description for the alt attribute.
2:43
Now I'll create an image tag in index.html, below the header.
2:59
Normally, I'd put the link to my image inside the source's quotes, and
3:03
a description of that image between the alt's quotes, right?
3:07
But instead, we wanna bind the values of the properties that we just
3:10
added to our data object so that Vue can update them for us.
3:16
That's where v-bind comes in.
3:18
To use v-bind, we have to do two things.
3:21
We have to tell it which attribute we're binding to.
3:24
In this case, we want to bind source
3:30
to image.source, and alt to image.alt.
3:42
So I'll type v-bind and then a colon.
3:45
And then the second part of v-bind is always the attribute that you want to
3:49
bind to.
3:51
Between the quotes,
3:51
I wanna refer to the properties I've defined in our Vue instance.
3:55
So in source attribute, I'll refer to image.source,
4:02
and then I will add v-bind to alt, and refer to image.alt.
4:13
Let's save and refresh the browser, and now you have an image, excellent.
4:18
I'd like to mention quickly here that directives start to pile up after a while.
4:22
So Vue does provide a shorthand.
4:24
Instead of typing out v-bind, you can actually simply use a : here.
4:31
To keep it clear what's happening in the code,
4:33
I won't be using the shorthand in this course.
4:36
But I will call out any shorthand as we go, so you can use it on your own code.
4:42
Speaking of clean code, take a look at the markup we've written so
4:45
far, and start to think about how Vue templating can help it more dry.
4:50
Imagine if you wanted to make a gallery, and
4:53
that gallery had 10, 20, or 100 images.
4:56
If we were relying on just HTML, we'd have to repeat this mark up for
5:00
10, 20, or 100 images.
5:03
With Vue.js, we can reuse this template for however many images we have.
5:08
We'll learn how to do that in the next part of the course.
5:10
But first, let's take a look at how we can add interactivity
5:13
by binding events to our templates.

You need to sign up for Treehouse in order to download course files.

Vue.js Basics