Getting Started with Vue

Part 1, Chapter 4

In this chapter, we will create our first Vue application.

Source Code

All of the code for this course is stored on GitLab in the following repository:

Part I (Vue Fundamentals) of this course has a corresponding branch (part1_vue_fundamentals) in the repository.

Getting Started

The first step when deciding to use the Vue framework is to figure out how you want to pull in the JavaScript code for Vue. Some options:

Download the Vue JavaScript file
Use a CDN (Content Deliver Network)
Install via npm (Node package manager)
Vue CLI (Command Line Interface) tool

In Part I (Vue Fundamentals) of this course, we'll be using option 2 by reading in the Vue library from a CDN. CDNs are designed to quickly provide static files, so you shouldn't even notice the time to load the JavaScript file.

In Part II (Components), Part III (Working with an API), and Part IV (Vuex and Vue Router), we'll switch over to option 4 by creating our project using the Vue CLI/UI.

Returning to the index.html file, we need to update the <head> section to include the Vue source code from the CDN:

<head>
    <title>VueJS CRUD Course</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Local CSS file for styling the application-->
    <link rel="stylesheet" href="css/style.css">

    <!-- Vue.js 2 development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

The last line in the <head> section specifies that the vue.js file should be loaded in from the CDN so that it can be used within our webpage.

We're now ready to start building webpages with Vue!

Vue Instance

Each Vue application needs to start by creating a new Vue instance:

<!-- VueJS Code -->
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_app',
  });
</script>

This code should be placed at the end of the index.html file, but it still needs to be within the <body> tag. For the first part of this course, we'll be placing all of our Vue source code into this section. Later in the course as our Vue code expands in size, we'll move the code to a separate JavaScript (Vue) files.

The variable that is created above is called 'vm', which is shorthand for 'View-Model'. This is a common naming convention for the Vue instance in Vue applications.

When creating the Vue instance above, the key option that is specified is the <el> (element) element. The <el> tag specifies which HTML element to associate the Vue instance with. What this means is that we can use Vue code for anything within that HTML element.

For this course, we want to be able to use Vue throughout the webpage, so let's add a new <div> element around our existing HTML elements within the <body> tag:

<body>
    <div id="vue_app">
        <div class="grid-container">
            <header class="header-title">
                <h1>VueJS CRUD Course</h1>
            </header>

            <nav class="navigation-links">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>

            <div class="data-content">
                <h1>Content goes here!</h1>
            </div>

            <footer class="footer">
                <h4>Footer</h4>
            </footer>
        </div>
    </div>
    ...
</body>

We can now use Vue for any elements within the <div> tag with the id of vue_app.

Data

With the necessary setup in place, let's actually use Vue!

Here is the updated Vue code:

<!-- VueJS Code -->
<script type="text/javascript">
  vm = new Vue({
    el: '#vue_app',
    data: {
      navTitle: 'Vue Course',
      footerMessage: 'testdriven.io (2019)',
    },
  });
</script>

We now have the navTitle and footerMessage data properties available to use in our HTML. We can update the HTML code to utilize these data elements in the <header> and <footer> tags by using the {{ }} syntax (double curly braces):

<div id="vue_app">
    <div class="grid-container">
        <header class="header-title">
            <h1>{{ navTitle }}</h1>
        </header>

        <nav class="navigation-links">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>

        <div class="data-content">
            <h1>Content goes here!</h1>
        </div>

        <footer class="footer">
            <h4>{{ footerMessage }}</h4>
        </footer>
    </div>
</div>

Vue allows you to bind the data properties in the Vue instance (navTitle and footerMessage) to the HTML elements. When the HTML code is displayed in your web browser, the data properties are loaded into the {{ }} locations specified, so the proper data is displayed.

With this updated code, our webpage looks like:

Webpage After Adding VueJS

The title in the Navigation bar is now being defined by the navTitle data property and the footer text is now being defined by the footerMessage data property.

Vue DevTools Example

Once you have the Vue DevTools installed for your web browser, you'll see that any website (including the one that we're developing!) will show the Vue icon highlighted in the top-right corner:

VueJS Detected by VueJS DevTools

After seeing that Vue has been detected, open up the Developer Tools in your web browser. Here is an example from Chrome:

Find Developer Tools in Chrome

Sometimes the Vue DevTools can be hard to find, but there should be a Vue tab in the Developer Tools:

Find VueJS DevTools in Chrome

Once you have found the Vue tab in the Developer Tools, click on the Root element:

VueJS DevTools Example

If you click on the Root element, you'll see that the entire webpage is highlighted. This means that our Vue instance can be used in any of these elements thanks to creating the <div> tag with an id of vue_app around all of our HTML codes.

To see the reactive power of Vue, let's try editing the value of one of the data properties by clicking on the edit icon (it looks like a pencil) next to the navTitle property:

VueJS DevTools Edit Example

Try changing the text associated with the navTitle property; you should see the title of the webpage change instantly after pressing ENTER. For example:

VueJS DevTools Edit Example Part II

Pretty cool, right?

What's happening?

When we create the Vue instance, we are now adding data to our Vue instance in the data field. The data field is an object with two properties (navTitle and footerMessage).

In JavaScript, the term 'object' is confusing to me, as it has so many meanings in other programming languages. A JavaScript object is really a listing of key/value pairs, similar to a dictionary in Python or a hash table in C++.

When any property in the data object is changed, what you see on the webpage (i.e., the view) will be automatically updated thanks to Vue! This alone is a reason to use Vue over vanilla JavaScript, as there is so much functionality being abstracted away here and this reactive behavior just works out-of-the-box.

Summary

In this chapter, we created our first Vue application by loading the Vue library from a CDN into our webpage and then creating a Vue instance. We created a new <div> tag around all of our existing HTML elements to allow Vue to apply to our entire website. Finally, we created two data properties to change two text fields on our website.

This chapter also provided an introduction to Vue DevTools, which are really beneficial for debugging Vue (more to come in later chapters).