Preview
Video Player
00:00
00:00
Add interactivity with v-show and v-on
9:02Learn how to show or hide part of your template based on certain conditions.
We've learned how to
trigger an event with Vue,
0:00
now let's see how to add
some real interactivity.
0:02
The interactivity that we wanna
add is the ability to show or
0:05
hide this author and summary information
each time the book's title is clicked.
0:08
Download and open the project files
if you don't have them open already.
0:13
I'm going to delete the sayHello
method from the last video
0:17
from the Vue instance as
well as from the template.
0:20
I'm also going to put the two paragraphs
into their own div since we know we're
0:33
going to want to show and
hide them together.
0:37
And I'll give the new
div an ID of bookDetail.
0:51
Since we want a function
to run each time this h2,
0:57
the book title is clicked,
we'll add a v-on directive and
1:01
specify that on click we want to
run a method called toggleDetails.
1:05
So I'll say v-on:click,
Run a method called toggleDetails.
1:10
Let's create that method
in our Vue instance now.
1:19
If you haven't used our framework before,
1:29
you're probably used to manipulating
DOM elements in a certain way.
1:32
Working with plain JavaScript or jQuery,
1:35
it might be tempting to start saving the
HTML elements you'll need to variables.
1:38
So you can start manipulating them,
like this.
1:42
And then for example,
we might take bookDetail and
1:48
start trying to manipulate
its display property.
1:51
The logic might go, change of the display
property to none to hide it, or
1:57
back to block to show it again, and so on.
2:02
Fight against the urge to do this,
2:06
because Vue has a way of approaching
things that's a little different.
2:08
And it's an important pattern to
start wrapping your head around.
2:11
I'll show you how it works.
2:14
Let's save and go to index.html.
2:17
To show or hide the div containing
our bookDetail information,
2:20
we can use a new directive called v-show.
2:23
You can pass v-show a value or
an expression.
2:32
And if that value or
expression evaluates to true or
2:35
some truthy value, it will show
the element that we placed it on.
2:39
And if that value or expression evaluates
to false, or some falsey value,
2:44
it will hide the element
we've placed it on.
2:47
To demonstrate,
I'll pass the value false to v-show.
2:50
Then I'll save and
let's refresh the browser.
2:56
And the book details disappear.
2:59
If I set this back to true,
they will reappear.
3:02
Rather than set v-show to true or false,
I'm going to bind v-show to a property
3:07
called showDetail, which we'll define
in our Vue instance in just a moment.
3:12
So here we're saying, Vue,
hide this div if showDetail is false,
3:18
and show this div if showDetail is true.
3:24
Now let's add the showDetail
property to our Vue instance.
3:27
Save, go to app.js, and
just beneath the book summary,
3:31
add a property called showDetail.
3:35
Keep in mind that this is case sensitive,
so make sure to capitalize the D,
3:41
if that's what you did
here in the directive.
3:46
I'm going to set the showDetail
property to false.
3:49
Now let's go to the browser,
and open up the console.
3:54
Remember to save first.
3:56
I can access the value of showDetail as
we learned in an earlier video by dot
4:05
notation.
4:10
So I'll refer to the Vue instance and
then showDetail.
4:11
And I can change the value of
showDetail by reassigning it to true.
4:16
And you can see the book details returned.
4:23
I can change the value again and again to
make the book details appear and reappear.
4:26
Great, we have the behavior we want but
4:34
changing this value manually
isn't super helpful.
4:36
What we need is a method that
changes the value of showDetail
4:40
each time the book title is clicked.
4:43
This is where the toggleDetails
method comes in.
4:45
Inside the toggleDetails method, I'm going
to set showDetail to its opposite each
4:50
time the toggleDetail method is called.
4:55
So I'm using this to refer to
showDetail in our data object above.
4:59
And keep in mind that other than that this
is regular JavaScript inside this method,
5:06
nothing fancy.
5:11
And basically it means that whatever
the value of showDetail is,
5:12
make it the opposite.
5:16
You can think of it as kind
of a shorthand if statement.
5:18
So if the value is false,
as we've set it by default,
5:21
this will set the value to true.
5:24
And if it's true, it will set it to false.
5:26
So let's save, and refresh, and
we have some interactivity.
5:30
This is that important pattern
that I was referring to.
5:37
Using plain JavaScript or jQuery,
we'd likely be directly manipulating a DOM
5:40
element, changing it's display
property when the h2 is clicked.
5:45
We're still achieving the same
effect doing it this way.
5:50
But the state of the book details whether
or not they are showing or not showing,
5:52
is no longer strictly bound to whether or
not the h2 has been clicked.
5:58
The bookDetail div doesn't
care about the click event.
6:03
And the click event doesn't
care about the bookDetail div.
6:07
Instead the click event triggers a method
that changes the showDetail property
6:11
And then Vue shows or
hides the book details based on whether or
6:21
not the showDetail property is true or
false.
6:26
In other words, the bookDetail div and
the click event are both
6:29
only concerned with a single piece of data
in our Vue instance called showDetail.
6:34
If your brain's melting a bit
at this point, don't worry.
6:41
We'll see this pattern again and
again throughout the course, and
6:44
it'll become more familiar.
6:47
But hopefully now you're starting to see
how and why Vue helps you organize and
6:49
separate the different parts of
your code in a logical manner.
6:53
By writing our data, Vue, and Vue logic
separately, we can avoid that big hard
6:56
to maintain file of spaghetti
JavaScript we talked about earlier.
7:01
One more thing to mention about events and
Vue,
7:05
they also accept JavaScript expressions.
7:08
So rather than putting this
logic inside of a method,
7:11
I can actually place it directly
into the click directive.
7:15
And Vue knows that we're referring
to a property on the data object in
7:26
the Vue instance so we can get rid of
this and just refer to the property here.
7:31
And this is saying the exact same thing.
7:40
On click, change the value of
showDetail to true or false.
7:43
And again, v-show will look at the value
of showDetail and if it's true,
7:47
it will show the div.
7:51
And if it's false,
It will not show the div.
7:53
Let's see if this works, and great,
we still have the same behavior.
7:58
Now I can go into app.js and
delete this method altogether.
8:04
Passing an expression to the v-on
directive is generally okay for
8:09
small projects and smaller expressions.
8:12
But as they get longer and
more complicated,
8:15
you'll want to move them
into their own method.
8:18
That was a lot, but don't worry,
8:21
we'll be revisiting everything we
just learned with different examples.
8:22
And it will feel more comfortable
by the time we're done.
8:26
So far we've learned about
front end frameworks and
8:29
how they can enhance
our work as developers.
8:32
We've learned how to use Vue templating
and data binding to display information.
8:34
And how to add functionality and
interactivity with Vue directives and
8:38
event handling.
8:42
We can display a few lines of text and
data for a single item.
8:43
But what if we have a whole list of stuff?
8:47
In the next part of the course, we'll see
how Vue templates can save us from writing
8:50
hundreds of lines of repeating HTML,
by looping through our data structures and
8:54
re-using templates from multiple items.
8:58