1 00:00:00,400 --> 00:00:02,891 We've learned how to trigger an event with Vue, 2 00:00:02,891 --> 00:00:05,520 now let's see how to add some real interactivity. 3 00:00:05,520 --> 00:00:08,944 The interactivity that we wanna add is the ability to show or 4 00:00:08,944 --> 00:00:13,682 hide this author and summary information each time the book's title is clicked. 5 00:00:13,682 --> 00:00:17,411 Download and open the project files if you don't have them open already. 6 00:00:17,411 --> 00:00:20,877 I'm going to delete the sayHello method from the last video 7 00:00:20,877 --> 00:00:23,868 from the Vue instance as well as from the template. 8 00:00:33,256 --> 00:00:37,392 I'm also going to put the two paragraphs into their own div since we know we're 9 00:00:37,392 --> 00:00:39,786 going to want to show and hide them together. 10 00:00:51,428 --> 00:00:54,455 And I'll give the new div an ID of bookDetail. 11 00:00:57,816 --> 00:01:01,290 Since we want a function to run each time this h2, 12 00:01:01,290 --> 00:01:05,428 the book title is clicked, we'll add a v-on directive and 13 00:01:05,428 --> 00:01:10,176 specify that on click we want to run a method called toggleDetails. 14 00:01:10,176 --> 00:01:19,343 So I'll say v-on:click, Run a method called toggleDetails. 15 00:01:19,343 --> 00:01:22,339 Let's create that method in our Vue instance now. 16 00:01:29,852 --> 00:01:32,112 If you haven't used our framework before, 17 00:01:32,112 --> 00:01:35,728 you're probably used to manipulating DOM elements in a certain way. 18 00:01:35,728 --> 00:01:38,146 Working with plain JavaScript or jQuery, 19 00:01:38,146 --> 00:01:42,792 it might be tempting to start saving the HTML elements you'll need to variables. 20 00:01:42,792 --> 00:01:46,033 So you can start manipulating them, like this. 21 00:01:48,413 --> 00:01:51,700 And then for example, we might take bookDetail and 22 00:01:51,700 --> 00:01:54,996 start trying to manipulate its display property. 23 00:01:57,842 --> 00:02:02,053 The logic might go, change of the display property to none to hide it, or 24 00:02:02,053 --> 00:02:04,480 back to block to show it again, and so on. 25 00:02:06,680 --> 00:02:08,189 Fight against the urge to do this, 26 00:02:08,189 --> 00:02:11,373 because Vue has a way of approaching things that's a little different. 27 00:02:11,373 --> 00:02:14,830 And it's an important pattern to start wrapping your head around. 28 00:02:14,830 --> 00:02:15,980 I'll show you how it works. 29 00:02:17,540 --> 00:02:20,061 Let's save and go to index.html. 30 00:02:20,061 --> 00:02:23,938 To show or hide the div containing our bookDetail information, 31 00:02:23,938 --> 00:02:26,534 we can use a new directive called v-show. 32 00:02:32,640 --> 00:02:35,970 You can pass v-show a value or an expression. 33 00:02:35,970 --> 00:02:39,120 And if that value or expression evaluates to true or 34 00:02:39,120 --> 00:02:43,040 some truthy value, it will show the element that we placed it on. 35 00:02:44,250 --> 00:02:47,950 And if that value or expression evaluates to false, or some falsey value, 36 00:02:47,950 --> 00:02:50,140 it will hide the element we've placed it on. 37 00:02:50,140 --> 00:02:53,140 To demonstrate, I'll pass the value false to v-show. 38 00:02:56,030 --> 00:02:58,500 Then I'll save and let's refresh the browser. 39 00:02:59,720 --> 00:03:01,220 And the book details disappear. 40 00:03:02,450 --> 00:03:05,950 If I set this back to true, they will reappear. 41 00:03:07,510 --> 00:03:12,060 Rather than set v-show to true or false, I'm going to bind v-show to a property 42 00:03:12,060 --> 00:03:16,480 called showDetail, which we'll define in our Vue instance in just a moment. 43 00:03:18,770 --> 00:03:24,200 So here we're saying, Vue, hide this div if showDetail is false, 44 00:03:24,200 --> 00:03:27,650 and show this div if showDetail is true. 45 00:03:27,650 --> 00:03:31,395 Now let's add the showDetail property to our Vue instance. 46 00:03:31,395 --> 00:03:35,462 Save, go to app.js, and just beneath the book summary, 47 00:03:35,462 --> 00:03:37,959 add a property called showDetail. 48 00:03:41,659 --> 00:03:46,304 Keep in mind that this is case sensitive, so make sure to capitalize the D, 49 00:03:46,304 --> 00:03:49,201 if that's what you did here in the directive. 50 00:03:49,201 --> 00:03:54,102 I'm going to set the showDetail property to false. 51 00:03:54,102 --> 00:03:56,906 Now let's go to the browser, and open up the console. 52 00:03:56,906 --> 00:03:58,994 Remember to save first. 53 00:04:05,423 --> 00:04:10,360 I can access the value of showDetail as we learned in an earlier video by dot 54 00:04:10,360 --> 00:04:11,165 notation. 55 00:04:11,165 --> 00:04:16,260 So I'll refer to the Vue instance and then showDetail. 56 00:04:16,260 --> 00:04:23,175 And I can change the value of showDetail by reassigning it to true. 57 00:04:23,175 --> 00:04:26,317 And you can see the book details returned. 58 00:04:26,317 --> 00:04:31,770 I can change the value again and again to make the book details appear and reappear. 59 00:04:34,740 --> 00:04:36,560 Great, we have the behavior we want but 60 00:04:36,560 --> 00:04:38,990 changing this value manually isn't super helpful. 61 00:04:40,050 --> 00:04:43,350 What we need is a method that changes the value of showDetail 62 00:04:43,350 --> 00:04:45,910 each time the book title is clicked. 63 00:04:45,910 --> 00:04:48,410 This is where the toggleDetails method comes in. 64 00:04:50,180 --> 00:04:55,162 Inside the toggleDetails method, I'm going to set showDetail to its opposite each 65 00:04:55,162 --> 00:04:57,630 time the toggleDetail method is called. 66 00:04:59,350 --> 00:05:05,320 So I'm using this to refer to showDetail in our data object above. 67 00:05:06,900 --> 00:05:11,460 And keep in mind that other than that this is regular JavaScript inside this method, 68 00:05:11,460 --> 00:05:12,670 nothing fancy. 69 00:05:12,670 --> 00:05:16,230 And basically it means that whatever the value of showDetail is, 70 00:05:16,230 --> 00:05:17,140 make it the opposite. 71 00:05:18,460 --> 00:05:21,020 You can think of it as kind of a shorthand if statement. 72 00:05:21,020 --> 00:05:24,377 So if the value is false, as we've set it by default, 73 00:05:24,377 --> 00:05:26,403 this will set the value to true. 74 00:05:26,403 --> 00:05:30,300 And if it's true, it will set it to false. 75 00:05:30,300 --> 00:05:37,917 So let's save, and refresh, and we have some interactivity. 76 00:05:37,917 --> 00:05:40,975 This is that important pattern that I was referring to. 77 00:05:40,975 --> 00:05:45,843 Using plain JavaScript or jQuery, we'd likely be directly manipulating a DOM 78 00:05:45,843 --> 00:05:50,073 element, changing it's display property when the h2 is clicked. 79 00:05:50,073 --> 00:05:52,971 We're still achieving the same effect doing it this way. 80 00:05:52,971 --> 00:05:58,095 But the state of the book details whether or not they are showing or not showing, 81 00:05:58,095 --> 00:06:02,620 is no longer strictly bound to whether or not the h2 has been clicked. 82 00:06:03,742 --> 00:06:07,670 The bookDetail div doesn't care about the click event. 83 00:06:07,670 --> 00:06:11,310 And the click event doesn't care about the bookDetail div. 84 00:06:11,310 --> 00:06:18,664 Instead the click event triggers a method that changes the showDetail property 85 00:06:21,762 --> 00:06:26,130 And then Vue shows or hides the book details based on whether or 86 00:06:26,130 --> 00:06:29,416 not the showDetail property is true or false. 87 00:06:29,416 --> 00:06:34,770 In other words, the bookDetail div and the click event are both 88 00:06:34,770 --> 00:06:41,753 only concerned with a single piece of data in our Vue instance called showDetail. 89 00:06:41,753 --> 00:06:44,548 If your brain's melting a bit at this point, don't worry. 90 00:06:44,548 --> 00:06:47,742 We'll see this pattern again and again throughout the course, and 91 00:06:47,742 --> 00:06:49,209 it'll become more familiar. 92 00:06:49,209 --> 00:06:53,325 But hopefully now you're starting to see how and why Vue helps you organize and 93 00:06:53,325 --> 00:06:56,644 separate the different parts of your code in a logical manner. 94 00:06:56,644 --> 00:07:01,540 By writing our data, Vue, and Vue logic separately, we can avoid that big hard 95 00:07:01,540 --> 00:07:05,723 to maintain file of spaghetti JavaScript we talked about earlier. 96 00:07:05,723 --> 00:07:08,703 One more thing to mention about events and Vue, 97 00:07:08,703 --> 00:07:11,468 they also accept JavaScript expressions. 98 00:07:11,468 --> 00:07:15,413 So rather than putting this logic inside of a method, 99 00:07:15,413 --> 00:07:19,812 I can actually place it directly into the click directive. 100 00:07:26,125 --> 00:07:31,853 And Vue knows that we're referring to a property on the data object in 101 00:07:31,853 --> 00:07:38,200 the Vue instance so we can get rid of this and just refer to the property here. 102 00:07:40,840 --> 00:07:43,070 And this is saying the exact same thing. 103 00:07:43,070 --> 00:07:47,288 On click, change the value of showDetail to true or false. 104 00:07:47,288 --> 00:07:51,736 And again, v-show will look at the value of showDetail and if it's true, 105 00:07:51,736 --> 00:07:53,016 it will show the div. 106 00:07:53,016 --> 00:07:57,023 And if it's false, It will not show the div. 107 00:07:58,593 --> 00:08:02,430 Let's see if this works, and great, we still have the same behavior. 108 00:08:04,955 --> 00:08:09,110 Now I can go into app.js and delete this method altogether. 109 00:08:09,110 --> 00:08:12,620 Passing an expression to the v-on directive is generally okay for 110 00:08:12,620 --> 00:08:15,870 small projects and smaller expressions. 111 00:08:15,870 --> 00:08:18,351 But as they get longer and more complicated, 112 00:08:18,351 --> 00:08:21,034 you'll want to move them into their own method. 113 00:08:21,034 --> 00:08:22,646 That was a lot, but don't worry, 114 00:08:22,646 --> 00:08:26,217 we'll be revisiting everything we just learned with different examples. 115 00:08:26,217 --> 00:08:29,358 And it will feel more comfortable by the time we're done. 116 00:08:29,358 --> 00:08:32,042 So far we've learned about front end frameworks and 117 00:08:32,042 --> 00:08:34,363 how they can enhance our work as developers. 118 00:08:34,363 --> 00:08:38,702 We've learned how to use Vue templating and data binding to display information. 119 00:08:38,702 --> 00:08:42,573 And how to add functionality and interactivity with Vue directives and 120 00:08:42,573 --> 00:08:43,551 event handling. 121 00:08:43,551 --> 00:08:47,502 We can display a few lines of text and data for a single item. 122 00:08:47,502 --> 00:08:50,059 But what if we have a whole list of stuff? 123 00:08:50,059 --> 00:08:54,441 In the next part of the course, we'll see how Vue templates can save us from writing 124 00:08:54,441 --> 00:08:58,697 hundreds of lines of repeating HTML, by looping through our data structures and 125 00:08:58,697 --> 00:09:01,030 re-using templates from multiple items.