Declarative Rendering

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax.

const app = Vue.createApp({})
const vm = app.mount('#app')

<div id="app">{{ 1 + 2 }}</div>

The double curly braces, also known as the mustache syntax, are used to place a JavaScript expression directly inside HTML. The mustache syntax can also access data from the Vue application, which we will explore further in the next section.

Data Property

The data property of a Vue application or component must be a function. This function must return an object, which Vue will make available to the template syntax. The properties in the return object will act as variables in the HTML.

const app = Vue.createApp({
  data: function () {
    return { count: 3 }
  }
})

const vm = app.mount('#app')

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

Reactive Data

Now that count has been added to the HTML, Vue will watch the value of count, and if it changes, Vue will react by updating the HTML automatically. The following example demonstrates how this works, but updating the value of count every second.

const app = Vue.createApp({
  data: function () {
    return { count: 0 }
  },
  mounted: function () {
    setInterval(() => { this.count++ }, 1000)
  }
})

const vm = app.mount('#app')

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