by Indrek Lasn
From zero to hero with Vue — getting up and running
In the previous chapter, we went over why we should give Vue a go — you’ll find the link here. Check it out if you have any questions about Vue.
Note: This article was originally published at strilliant.com — feel free to give some love to the original! ❤
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.
Table of contents:
- 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.
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, 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.
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.
Bonus tip: There’s a shorthand for the
v-bind syntax. We can remove the
v-bind completely and be left with the
If you feel confused, please let me know in the comments and I will try to explain it better. ❤
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
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
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.
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;
From zero to hero with Vue — Input handling, Loops, Components
Welcome back, please check the basics first before continuing as we will move on to more advanced topics.medium.comStrilliant
Tutorials by developers to developerswww.strilliant.comIndrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek). Author, software engineer, founder. Zurich, Switzerlandtwitter.comAll you need to know about the Web Audio API
You see this, what do you do?codeburst.ioThe secret to being a top developer is building things! Here’s a list of fun apps to build!
You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…medium.freecodecamp.org