From zero to hero with Vue — Up and running

“Hello World”

Let’s begin by opening the terminal and creating a folder called zero-to-hero-vue — This is where our Vue application will live. Create a index.html and app.js inside the folder as well.

Instead of writing the basic html boilerplate, we can utilise emmet. Emmet is built-in for VSC.

In case you’re curious for more emmet tips and hotkeys, here’s the full cheat-sheet.

We’re going to start off by including the Vue library as an external script. We’re going to use a module bundler later on, for now let’s keep it simple.

Include this script after the body tags, make sure it’s first in order always.

Nifty! Make sure to link app.js with the index.html too.

Every Vue application starts by creating a new Vue instance with the Vue constructor. We bind the Vue instance to a root element, #app in this case.

Vue uses a virtual DOM. The vDOM needs to be “mounted” to a DOM element.

We created a new Vue instance. We bound the Vue instance to the div with the id of app — think of this as our root element. At the bottom we included the app.js script.

That’s all there is! We can immediately start writing reactive code.

Next up is the data property. The data property is the meant for storing our application data… hey logical right? Think of as equivalent as this.props.data from React world. Inside the data property we can declare our properties we want to use in our app, let’s make one called message

Notice the curly brackets inside the index.html — Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.

Directives

Vue uses attributes called directives. Directives are a simple way to keep the user interface and data in sync.

Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”

Let’s add a span with a Vue directive.

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.

Bonus tip: There’s a shorthand for the v-bind syntax. We can remove the v-bind completely and be left with the :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. Wether 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.

Works like a charm!

Bonus tip: Shorthand for v-on:click is @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.

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?

Adding a simple method which toggles our showMessage property and including it in our view.

Congratulations for making it this far! You have successfully learned the very basics of Vue. This is just the beginning of a greater path.

Source code for the chapter

We have so much to cover, follow me to the next chapter below;