Introducing Vue Directives

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