Introduction to Vue

Before we go much further, we really need to understand the basics of Vue, and how we go about using it to define and display our application's data on a web page.

The Vue instance

Every Vue application must have at least one root Vue instance, which is created when we pass an options object into the new Vue() constructor. There are a number of properties that we can define on this object, many of which are optional. These properties describe what data the instance has access to, and what kind of actions and manipulations it can do with that data.

Attaching to the DOM

Root Vue instances are attached directly to the DOM using the standard CSS selector syntax. In the following example, we specify an el property of #app on the options object, which instructs the instance to look for an element with an ID of app and attach to it:

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

This forms a relationship between the Vue instance and a specific portion of the DOM, meaning we can start to display our dynamic data anywhere inside the specified element. However, if we tried to display our data outside of it, it wouldn't work as Vue is not managing the DOM at that level.

Defining data properties

In order to render data into the DOM, we first need to define the data we want to display. Every Vue instance can define a data object to hold as many data properties as we wish:

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

Rendering data into the DOM using expressions

To render our dynamic data properties into the DOM, Vue uses a very simple HTML template syntax which is inspired by the very popular handlebars templating library. This is why we refer to it as the handlebar syntax, which uses double curly braces, or mustaches, to render data within HTML elements:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

Anything placed within a pair of double curly braces is treated as an expression, which means it will be interpreted using JavaScript. As such, we can reference the properties we define in the data object as we've done earlier, but can also make use of any standard JavaScript concept. As an example, we could easily make use of the Date object for rendering the current timestamp:

<div id="app">
  {{ message }}
  <p>
    The current date is: {{ new Date() }}
  </p>
</div>

We can even use logical operators to perform math-based operations or concatenate strings:

<div id="app">
  {{ message }}
  <p>
    {{ currentDate + ': ' + new Date() }}
  </p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World',
    currentDate: 'The current date is'
  }
})

Expressions allow us to perform any kind of operation on the data properties defined on the Vue instance, as well as built-in JavaScript objects and functions.

Building component trees

If you are only interested in plugging Vue into a handful of pages in a traditional MVC web application, you would define as many root Vue instances as required, attaching each one to a different DOM element. However, when building a full SPA with Vue, you would instead define a single root Vue instance with a nested tree of components underneath it. This single root Vue instance would then be responsible for attaching the entire application to a single DOM element.

We've already discussed what components are at a very high level, but what exactly is a component within the context of a Vue SPA? The answer is simply another Vue instance, albeit this time not a root Vue instance. There are a few subtle differences between a root Vue instance and a non-root Vue instance—most notably that only the root Vue instances define el attributes. This is because nested Vue instances, or components in a component tree, are simply rendered within their parent root Vue instances template. They do not need to be told where to attach themselves.

The other main difference between a root Vue instance and a component Vue instance is that the latter must define their data property as a function rather than an object. We've already seen an example of this when we first looked at the basic structure of a Vue component, but to reiterate, it looked as follows:

<template>
  <div class="product">
    {{ name }}
  </div>
</template>


<script>
export default {
  name: 'product',
  data () {
    return {
      name: 'Hands on ASP.NET Core and Vue.js'
    }
  }
}
</script>

<style>
.product {
  font-size: 12px;
  font-weight: bold;
  color: teal;
}
</style>

Notice that the data property is a function that returns an object this time. This is because of the fact that every Vue component is a Vue instance. If we use a plain data object rather than a function returning an object, Vue cannot determine which component templates need to be refreshed when that property changes. This is a big issue when we render the same component multiple times when looping over lists of data, and then try and update a single list item's data property.

Reactivity

Now that we've talked about the Vue instance, it's worth talking about reactivity. One of Vue's core concepts is its reactivity system, which is also one of the main differences between building applications with Vue and sticking with jQuery or even plain old JavaScript. With jQuery or plain JavaScript, when a piece of data needs to change, we have to manually ensure that any DOM element which references that data is updated to display its new value. How big a job this is depends entirely on how big the application is, and how well-written it is. However, it's an exceptionally error-prone way of working, regardless of those factors.

In Vue, we bind the DOM to data properties defined in JavaScript, and then when those data properties change, the DOM is automatically updated for us by the reactivity system. The application quite literally becomes reactive to data changes, so it really doesn't matter how big the application is since every DOM element that displays a specific piece of data will automatically refresh when that value changes—no more manual DOM updates!