Let’s check out one of Vue’s coolest features: directives.
Directives are custom HTML attributes built into Vue that accomplish incredibly complex, common front-end operations using barely any code.
For example, one very common front-end need is to conditionally display elements. Let’s say we only want to show a login button if a user isn’t already logged in. We can add a v-if
directive as an attribute to HTML elements like so:
<button v-if="userIsLoggedIn">Log Out</button> <button v-if="!userIsLoggedIn">Log In</button>
v-if
acts an awful lot like JavaScript if
- it will only display the HTML element it is on if the v-if
statement returns true
. In this case, it will check our .data
for a value of userIsLoggedIn
. Then it will only display our “Log Out” button if userIsLoggedIn
is true
and will only display our “Log In” button if it is false
.
Another complex, common front-end need is to render an array of items identically. We can use v-for
as an attribute, like so:
<ul> <li v-for="todo in todoList">{{ todo }}</li> </ul>
Bam, just like that v-for
will iterate through every item in our .data
‘s todoList
array, create a variable called todo
containing each succesive array element, and create an li
displaying each element in the list. Even if a new item is added to the list, the list will be re-rendered instantly to display that new item.
One more super cool directive is v-model
. v-model
can be added to any form field and hooked up to our Vue app’s data
. Modifying the form field will then automatically modify the specified Vue app data
!
<input v-model="username" />
The above input field will display the current value of username
on the Vue app’s data
object and will change the value of username
if the user modifies the value in the field. That’s some complicated JavaScript implemented perfectly with very little code.
As you may have noticed, every built-in Vue directive starts with v-
. There are too many for us to cover in this lesson, however you can view a list of them all here. Just know that if there isn’t a directive that does what you need — you can even make your own!
Directives make complex front-end code easy to write, easy to read, and optimized for great site performance.
Instructions
We’ve added a number of directives throughout our app:
- We added a
v-if
to the bio section so that the section only displays ifbio
exists. - We added
v-for
to the tweets section so that alltweets
will be displayed, not just the first three. - We added
v-model
directives to most of our form fields.v-model
binds the value of the HTML field element it is on to thedata
value with the provided name.
Find all of these changes in the code to see how we implemented them. Then try typing in the fields at the bottom of the preview site to see the values change throughout the site!
We’re now going to finish the feature that allows users to write new tweets.
First, we need to bind the “New Tweet” input field to data
‘s newTweet
value with v-model
.
Using v-model
, bind the “New Tweet” <input>
field to newTweet
.
We now need to make the “Add Tweet” button add the newTweet
value to the end of tweets
when it is clicked. We’re going to use one more directive to make this happen: v-on:click
. v-on:click
takes JavaScript code as its value. Whenever the element is clicked, the provided code will run, using the Vue app’s data
for relevant values.
Add a v-on:click
directive with a value of tweets.push(newTweet)
to the “Add Tweet” <button>
.
This might seem like a bit of a challenge since you’ve never seen this directive before. Check out the hint if you’re stuck.
Once you’d added this directive and run your code, the site should work. Try typing in the “New Tweet” field and then clicking the “Add Tweet” button to see your new tweet get added to the list of tweets in the preview.