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.