A free Intro to Vue.js Course

A bunch of developers want to learn Vue.js, which describes itself as an approachable, versatile, and performant JavaScript framework.

In my free Intro to Vue.js course, I teach all the Vue essentials:

• The Vue Instance
• Attribute Binding
• Conditional Rendering
• List Rendering
• Event Handling
• Class & Style Binding
• Computed Properties
• Components
• Communicating Events
• Forms
• Tabs

In this tutorial by Vue Mastery, you’ll learn how simple it is to use the Vue Instance to get data from your JavaScript to display onto a webpage by learning about the Vue instance.

This tutorial is lesson 1 of a full Intro to Vue.js course available at VueMastery.com

Our Starting Code

We’re going to start with some very simple HTML:

<div id="app">
  <h1>product</h1>
</div>
<script src="main.js"></script>

Our HTML is linked to a JavaScript file that contains this variable:

var product = 'Socks'

Problem

We need a way to get product from our JavaScript to show up in the h1 of our HTML.

Install Vue.js

Our first step is to include Vue.js in our project, which we’ll do by adding this CDN script, which we got from vuejs.org’s installation page, at the bottom of our index.html file.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>

The Vue Instance

As mentioned, the Vue instance is the heart, or root, of our application.

var app = new Vue()

To instantiate it, we’ll pass an options object into it. Just like it sounds, this object has a variety of optional properties.

var app = new Vue({
  el: '#app'
})

Notice we’ve added the el option. That stands for element, and it specifies the element you are mounting the Instance to. In other words, el lets you plug your Instance into an element in the DOM.

Since we said '#app' that means our Instance, the root of our application, is now plugged into our div with the id of app.

Now that it’s plugged in, we can share the Instance’s data with that div. So let’s give our Instance some data to share.

var app = new Vue({
  el: '#app',
  data: { product: 'Socks' }
})

Instead of storing 'Socks' in the product variable like before, we’ve moved product into the data option of our Instance.

Our div now has access to this data, so in order to display product in our div we just need to wrap it in {{ }}, which is a JavaScript expression .

<div id="app">
  <h1>{{ product }}</h1>
</div>

When we save this, we’ll see Socks appear on our webpage.

It worked! Data from our JavaScript is displaying on the page.

What just happened?

If you’re having trouble wrapping your head around how this is working, it might help you to imagine the expression functioning as a phone, which can call down to the Instance and ask what the value of product is.

When the expression receives that value, in this case 'Socks', it is able to display that value on the page.

But what happens if the value of product changes? Do we need to do anything to display that new value on the page?

No. Because Vue is reactive.

Introducing Reactivity

When we say that Vue is reactive, that means the Instance’s data is linked to every place that data is being referenced.

So if the value of product changes to 'Boots', the expression(s) referencing product will receive that new value, which will immediately be displayed.

Give the reactivity system a try for yourself. Open up the console and change the value of product and watch this reactivity happening live. Type app (which is the name of our Instance), then product (the data we want to change) and give it a new value.

To learn how Vue’s reactivity system works under the hood, you’ll want to take the Vue Internals course, which will be available here.

Code Playground

To practice these concepts yourself, head here to access this lesson’s code challenge.

What have we learned?

• The Vue instance is the heart of every Vue application
• The Vue instance plugs into an element in the DOM
• The Vue instance’s data can be displayed using an expression {{ }}
• Vue is reactive