The syntax for a directive is easy to understand. Vue will look for a vue inside the data property. The title attribute is from plain HTML. If you hover over the title attribute, a hidden text will be shown. It’s mostly used for acronyms and definitions.

Notice when hovering the text, a title will appear

Bonus tip: There’s a shorthand for the v-bind syntax. We can remove the v-bind completely and be left with the :title

:title is the same as v-bind:title

If you feel confused, please let me know in the comments and I will try to explain it better. ❤

Methods

Every application has buttons, inputs, etc for interactivity. Letting the user interact with the app is the very core of any application.

Let’s create a button which logs our message to the console.

Notice we created a new Vue property called methods. This is where we will place our methods.

The this keyword within Vue gives you easy access to all of your data and functionalities. Whether you want to access a data property, a computed property, a component prop, or a function, you can all find them directly bound to the this keyword.

We created a button with the directive v-on:click and passed in our method name as a string. Just like we do with plain JavaScript.

Calling our logMessage method

Works like a charm!

Bonus tip: Shorthand for v-on:click is @click

@click is the equivalent to v-on:click

Conditional statements

Conditionals and loops are the very essentials of building useful applications. All conditionals go under the logic of “what happens when?” if , else , else if , try , catch , etc are all conditional statements.

Let’s create the following conditional: if we have a message, show it, if not, don’t show it.

To get started, we’re going to create a boolean property inside our data object.

We added a new property: hasMessage: true

Next up we can use a directive called v-if inside our markup.

You got it! If we look at our browser, nothing has changed. This is because we set the showMessage property to true. In case you’re curious, v-else and v-if-else are valid conditionals too.

Let’s create a method which toggles the showMessage property. Try using what we learned earlier to do this by yourself. You can do it!

Ready?