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:
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:
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!
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-ifto the bio section so that the section only displays ifbioexists. - We added
v-forto the tweets section so that alltweetswill be displayed, not just the first three. - We added
v-modeldirectives to most of our form fields.v-modelbinds the value of the HTML field element it is on to thedatavalue 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.