Getting started with Vue.js - part one

In part one of the course, we will go through how you set up Vue and initializing a Vue instance.


What is Vue.js?

Vue(pronounced /vjuː/, like view) is a progressive framework built-in JavaScript for creating user interfaces. Vue is really easy to get started with and you can choose to either implement it in a small part of a existing project or you can build a entire project using it.

Vue was created back in 2014 by Evan You and has evolved very much since then. If you want to learn more about the framework or just check out their website you can find it here: vuejs.org.


Prerequisites

This course assumes that you already got a good fundamental understanding of HTML, CSS and JavaScript. If you don't have that you will probably get lost here very quickly.


Setting up the project

In this getting started course we are not going to cover installing Vue.js through the Vue CLI, but instead, we are just going to include Vue.js directly in our browser. We want you to get started with code as soon as possible and feel that this is a good way to start.

So the first thing we are going to do is to set up a HTML-file. You can begin by creating a folder named vuehero somewhere on your computer and create a file inside that folder called index.html. The code for this file is going to look like this.

Vue Hero - Introduction - Basic code

The reason why I show the code as a picture instead of just a regular code block is because I want you to actually have to write the code and not just copy it. By doing this you'll be learning much better. Vue should now be set up in your index.html file and if you open it in your browser you should see a boring white screen, we'll do something about that very soon!


Creating a Vue instance

The Vue instance that we are going to create will be the root of our app. A Vue instance can be very simple, but it can also be very complicated because we can pass in huge amount of optional parameters. Here is the code for setting it up.

Vue Hero - Introduction - Vue instance

Tip!

A expression is a way to use data values together with simple logic. We do this to make small changes to the data like combining two words, mathematics and so on. Here are a couple of examples:
Vue Hero - Introduction - Expressions

If you go to your browser now and refresh / open the index.html file you should see Vue Hero as a title on your page. And there you go, that is how you create a Vue instance.

Vue Hero - Introduction - Preview

Minichallenge

Before we continue I want you to do a little challenge. Can you add one more variable (call it what you want) to the data object and show it underneath the Vue Hero title as a paragraph? This will not be a part of the course so when you're finished you can just remove it.


Next

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.