1
00:00:00,530 --> 00:00:04,573
A Vue directive is a special attribute
that you add to HTML elements in Vue

2
00:00:04,573 --> 00:00:05,310
templates.

3
00:00:06,410 --> 00:00:09,447
Directives are Vue's way of
applying certain behaviors or

4
00:00:09,447 --> 00:00:11,530
attributes to elements.

5
00:00:11,530 --> 00:00:15,482
You can think of them as
special instructions for Vue.

6
00:00:15,482 --> 00:00:20,556
For example, rather than use
Mustache syntax on my h1 element,

7
00:00:20,556 --> 00:00:24,534
I could bind my title data
to the element like this,

8
00:00:26,988 --> 00:00:30,156
Using a directive called v-text.

9
00:00:30,156 --> 00:00:33,648
So using the directive v-text,

10
00:00:33,648 --> 00:00:38,769
I'm passing in the data
property title from here

11
00:00:41,542 --> 00:00:45,210
So now if we save and refresh,
we'll just see Hello.

12
00:00:45,210 --> 00:00:49,634
This particular directive works pretty
much the same way as Mustache syntax.

13
00:00:49,634 --> 00:00:53,912
The v-text directive tells Vue to keep
this each one element updated with

14
00:00:53,912 --> 00:00:56,220
whatever the value of title is.

15
00:00:56,220 --> 00:01:00,070
Remember, we're keeping track of
the value of title in our Vue instance.

16
00:01:00,070 --> 00:01:02,035
So if at some point the title changes,

17
00:01:02,035 --> 00:01:06,000
Vue will automatically change
the title in the template.

18
00:01:06,000 --> 00:01:10,630
Mustache syntax is often preferable when
you're only changing one portion of data

19
00:01:10,630 --> 00:01:11,230
in an element.

20
00:01:12,440 --> 00:01:13,049
For example,

21
00:01:13,049 --> 00:01:16,360
if you wanted to display a greeting
where only the name changes dynamically.

22
00:01:20,487 --> 00:01:23,642
So here I could put something like,

23
00:01:23,642 --> 00:01:28,385
Hello again, and
then title using Mustache syntax.

24
00:01:33,728 --> 00:01:37,826
And then I could change
title to whatever I want to.

25
00:01:42,009 --> 00:01:46,409
You can also bind a piece of data to
an HTML attribute using a directive called

26
00:01:46,409 --> 00:01:47,045
v-bind.

27
00:01:48,240 --> 00:01:52,980
It's called v-bind because you use it to
bind a piece of data to your template.

28
00:01:52,980 --> 00:01:57,000
For example, I'll show you how to use
v-bind to dynamically bind source and

29
00:01:57,000 --> 00:01:58,360
alt attributes to an image.

30
00:01:59,852 --> 00:02:04,411
In app.js, I'm going to nest a new object
within my data object called image.

31
00:02:09,165 --> 00:02:13,089
And my image property will
contain two properties,

32
00:02:13,089 --> 00:02:18,845
source, And alt.

33
00:02:20,388 --> 00:02:25,600
I'll set the source to a URL from a
website that provides placeholder images.

34
00:02:25,600 --> 00:02:27,870
If you're following along with me,
you can copy and

35
00:02:27,870 --> 00:02:29,737
paste the link from the Teacher's Notes.

36
00:02:34,483 --> 00:02:37,873
Finally, I'll add a short description for
the alt attribute.

37
00:02:43,873 --> 00:02:48,308
Now I'll create an image tag in
index.html, below the header.

38
00:02:59,431 --> 00:03:03,554
Normally, I'd put the link to my
image inside the source's quotes, and

39
00:03:03,554 --> 00:03:07,170
a description of that image
between the alt's quotes, right?

40
00:03:07,170 --> 00:03:10,630
But instead, we wanna bind the values
of the properties that we just

41
00:03:10,630 --> 00:03:14,490
added to our data object so
that Vue can update them for us.

42
00:03:16,350 --> 00:03:18,624
That's where v-bind comes in.

43
00:03:18,624 --> 00:03:21,640
To use v-bind, we have to do two things.

44
00:03:21,640 --> 00:03:24,810
We have to tell it which
attribute we're binding to.

45
00:03:24,810 --> 00:03:30,215
In this case, we want to bind source

46
00:03:30,215 --> 00:03:36,887
to image.source, and alt to image.alt.

47
00:03:42,147 --> 00:03:45,870
So I'll type v-bind and then a colon.

48
00:03:45,870 --> 00:03:49,920
And then the second part of v-bind is
always the attribute that you want to

49
00:03:49,920 --> 00:03:51,000
bind to.

50
00:03:51,000 --> 00:03:51,990
Between the quotes,

51
00:03:51,990 --> 00:03:55,930
I wanna refer to the properties
I've defined in our Vue instance.

52
00:03:55,930 --> 00:04:02,350
So in source attribute,
I'll refer to image.source,

53
00:04:02,350 --> 00:04:09,181
and then I will add v-bind to alt,
and refer to image.alt.

54
00:04:13,188 --> 00:04:18,090
Let's save and refresh the browser,
and now you have an image, excellent.

55
00:04:18,090 --> 00:04:22,170
I'd like to mention quickly here that
directives start to pile up after a while.

56
00:04:22,170 --> 00:04:24,570
So Vue does provide a shorthand.

57
00:04:24,570 --> 00:04:29,391
Instead of typing out v-bind,
you can actually simply use a : here.

58
00:04:31,778 --> 00:04:33,924
To keep it clear what's
happening in the code,

59
00:04:33,924 --> 00:04:36,520
I won't be using
the shorthand in this course.

60
00:04:36,520 --> 00:04:40,600
But I will call out any shorthand as we
go, so you can use it on your own code.

61
00:04:42,580 --> 00:04:45,530
Speaking of clean code,
take a look at the markup we've written so

62
00:04:45,530 --> 00:04:50,780
far, and start to think about how
Vue templating can help it more dry.

63
00:04:50,780 --> 00:04:53,690
Imagine if you wanted to make a gallery,
and

64
00:04:53,690 --> 00:04:56,550
that gallery had 10, 20, or 100 images.

65
00:04:56,550 --> 00:05:00,590
If we were relying on just HTML,
we'd have to repeat this mark up for

66
00:05:00,590 --> 00:05:03,230
10, 20, or 100 images.

67
00:05:03,230 --> 00:05:08,160
With Vue.js, we can reuse this template
for however many images we have.

68
00:05:08,160 --> 00:05:10,630
We'll learn how to do that in
the next part of the course.

69
00:05:10,630 --> 00:05:13,760
But first, let's take a look at
how we can add interactivity

70
00:05:13,760 --> 00:05:15,720
by binding events to our templates.