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! ❤

From Zero to Hero with Vue - getting up and running
Alright! Let's get our hands dirty! All we need is a text editor and a browser. I will be using Visual Studio Code…www.strilliant.com

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”
  • Directives
  • Methods
  • Conditional statements

“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.

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

Emmet - the essential toolkit for web-developers
Real-time bi-directional edit tool for CSS, LESS and SCSS.emmet.io

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

https://docs.emmet.io/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 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.

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 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…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 message:

Inside the #app div we can use Javascript expressions since this is where we initialised our Vue app.

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.

Template Syntax - Vue.js
Vue.js - The Progressive JavaScript Frameworkvuejs.org

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.

index.html
“The introduction to Reactive Programming you’ve been missing”

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.

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?

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.

Source code for the chapter

wesharehoodies/zero-to-hero-with-vue
Contribute to wesharehoodies/zero-to-hero-with-vue development by creating an account on GitHub.github.com

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
Did you know Javascript has a constantly evolving high-level API for processing and synthesizing audio? How cool is…codeburst.ioSupercharge your debugging experience for Node.js
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