Alright! Let’s get our hands dirty! All we need is a text editor and a browser. I will be using Visual Studio Code paired with Google Chrome.
- Getting started, understanding the basics, “hello world”
- Conditional statements
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
app.js inside the folder as well.
Creating our folder and index.html
Instead of writing the basic HTML boilerplate, we can utilise emmet. Emmet is built-in for VSC.
! + Tab inside a
.html file creates the boilerplate
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, but for now let’s keep it simple.
Include this script after the body tags, and make sure it’s first in order always.
Nifty! Make sure to link
app.js with the
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.
initializing the vue app
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
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…pretty logical, right? Think of it as equivalent to
this.props.data from the React world.
Inside the data property we can declare our properties we want to use in our app. Let’s make one called
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.
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.
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 is the same as
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.
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
We created a button with the directive
Works like a charm!
Bonus tip: Shorthand for
@click is the equivalent to
Conditionals and loops are the very essentials of building useful applications. All conditionals go under the logic of “what happens when?”
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
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-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!
We’re adding a simple method which toggles our
showMessage property and we’re including it in our view.
Toggling the message
Congratulations for making it this far! You have successfully learned the very basics of Vue. This is just the beginning of a greater path.
We have so much to cover– follow me to the next chapter