Getting Started with Vue.js Chapter 1Vue 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.