Initializing Vue and displaying the first message

Now that we have a template set up, we can initialize Vue and bind it to the HTML app space by using the following code:

      const app = new Vue().$mount('#app');

This code creates a new instance of Vue and mounts it on the HTML element with the ID of app. If you save your file and open it up in a browser, you will notice nothing has happened. However, under the hood, this one line of code has linked the p with the app variable, which is an instance of a Vue application.

Vue itself has many objects and properties that we can now use to build our app. The first one you will encounter is the el property. Using an HTML ID, this property tells Vue which element it should bind to and where the app is going to be contained. This is the most common way of mounting your Vue instance and all Vue code should happen within this element:

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

When the el property isn't specified in the instance, Vue initializes in an unmounted state—this allows any functions or methods you may have specified to run before mounting, to run and complete. You can then independently call the mounting function when ready. Behind the scenes, when using the el property, Vue is mounting the instance using a $.mount function. If you do want to wait, the $mount function can be called separately, for example:

      const app = new Vue();

      // When ready to mount app:
      app.$mount('#app');

However, as we will not need to delay the execution of our mount timing throughout the book, we can use the el element with the Vue instance. Using the el property is also the most common way of mounting the Vue app.

Alongside the el value, Vue has a data object that contains any data we need to access the app or app space. Create a new data object within the Vue instance and assign a value to a property by doing the following:

      const app = new Vue({
        el: '#app',

        data: {
          message: 'Hello!'
        }
      });

Within the app space, we now have access to the message variable. To display data within the app, Vue uses the Mustache templating language to output data or variables. This is achieved by placing the variable name between double curly brackets {{ variable }}. Logic statements, such as if or foreach, get HTML attributes, which will be covered later in the chapter.

Within the app space, add the code to output the string:

      <p id="app">
        {{ message }}
      </p>

Save the file, open it up in your browser, and you should be presented with your Hello! string.

If you don't see any output, check the JavaScript console to see if there are any errors. Ensure the remote JavaScript file is loading correctly, as some browsers and operating systems require additional security steps before allowing some remote files to be loaded when viewing pages locally on your computer.

The data object can handle multiple keys and data types. Add some more values to the data object and see what happens - make sure you add a comma after each value. Data values are simple JavaScript and can handle basic math, too - try adding a new  price key and setting the value to 18 + 6 to see what happens. Alternatively, try adding a JavaScript array and printing it out:

      const app = new Vue({
        el: '#app',

        data: {
         message: 'Hello!',
         price: 18 + 6,
         details: ['one', 'two', 'three']
       }
     });

In your app space, you can now output each of those values - {{ price }} and {{ details }} now output data - although the list may not be quite what you had expected. We'll cover using and displaying lists in Chapter 2, Displaying, Looping, Searching, and Filtering Data.

All the data in Vue is reactive and can be updated by either the user or the application. This can be tested by opening up the browser's JavaScript console and updating the content yourself. Try typing app.message = 'Goodbye!'; and pressing Enter - your app's content will update. This is because you are referencing the property directly - the first app refers to the const app variable that your app is initialized to in your JavaScript. The period denotes a property within there, and the message refers to the data key. You could also update app.details or price to anything you want!