Hello World in Vue.js

Time to start writing some code! Let’s start things off with the classic “Hello World” example.

The first thing we need to do, is to actually make Vue.js available to our very first Vue.js application. In order to do that,  head over to the installation page at vuejs.org. Here we have various options, from downloading the JavaScript file, using a CDN, to using the Vue CLI with webpack and more. Some of these options are a bit complicated at first, so let’s stick to the easy way and get back to the others when we have gone through the basics of Vue.js. So to use Vue.js within JSFiddle, we will make use of the CDN, so all we need from this page is the URL to the Vue.js file.

So if you scroll down to the CDN section and click the first link, you can now simply copy the address from the page that just opened. This is the URL that we need within JSFiddle.

Now all we have to do is to add this URL within a script tag.

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

That’s all we need to use Vue.js for now. With that out of the way, let’s get to the interesting part: coding!

At the heart of Vue.js is something that we call a “Vue instance.” A Vue instance is responsible for controlling a piece of HTML code, also referred to as a “template”, which is then rendered in the browser. In terms of code, a Vue instance is simply an object that is initialized from the Vue constructor function.

Let’s now create our first Vue instance, by simply writing new Vue(). Now this is not going to do anything in itself, because we must pass in some options to the constructor, in terms of a JavaScript object. The most important property in this object right now, is one called el, short for “element.”

new Vue({
   el: ''
});

This property should contain a string value with the CSS selector that matches the HTML element that we want the Vue instance to control. Let’s say that we want our Vue instance to control an element with an ID of “app,” in which case we would enter the ID prefixed with a hashtag sign.

new Vue({
   el: '#app'
});

The next thing we need to do, is to start writing the template for the Vue instance. Since we just defined that it should control an element with an ID of “app,” let’s create a div element with this ID. Of course you are free to use any identifier that you would like, or even a class if you prefer, in which case you would use a selector with a period instead of a hashtag sign.

<div id="app"></div>

Now instead of just writing “Hello World!” directly in the HTML, let’s make it more dynamic by using something called “string interpolation.” In order to do that, we have to first shift our attention back to our Vue instance and introduce a new property named data. As its name implies, this is where we will add the data that we want to be accessible within our Vue instance, and thereby within our template as well. This property must be an object of key-value pairs. Let’s say that we want to store a message within the Vue instance, so we add a key named message with a value of “Hello World!.”

new Vue({
   el: '#app',
   data: {
      message: 'Hello World!'
   }
});

So far so good, but what does that actually do for us? This data is now accessible to us from within our template, and we can use “string interpolation” to output it. “String interpolation” is basically just a fancy word for outputting data in our template by using a double curly bracket syntax, as you will see now. Now I actually want to output the message, so I will add a header and use string interpolation within it.

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

Notice the double curly bracket syntax, which both opens and closes the string interpolation. Within the curly brackets, we can write the name of our data property that we would like to output, in this case message.

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

Notice that we do not write data.message, as one might have thought was required. This is because Vue.js proxies the data to make it available without this prefix. We will get back to this in a later video, so don’t worry if that doesn’t make too much sense right now; the important thing is to keep in mind that the data keys can be accessed directly as in this example.

Another thing to note, is that you don’t need to store the newly created instance in a variable. This is only necessary if you need to use it later on in your script.

Alright, so let’s actually try to run this code and see if it does what we expect.

Looking at the right-hand side of the screen, we can see that our message is indeed being output as we would expect. So what happens here, is that our Vue instance is controlling the div, which we specified with the CSS selector in the el property. This element and all of its childs therefore have access to the data that we have specified within the data property in our Vue instance. We used this when we used string interpolation to output our message within our template.

Something interesting that we don’t see here, is that Vue.js actually watches our data properties for changes, and if a value changes, this is automatically reflected in the DOM and on the page. So while this example probably doesn’t look that impressive to you, there is actually a lot of things happening behind the scenes that we will go through in more details later in the course. But for now, we have just created our very first Vue.js application!