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