Vue Instance


What is a Vue instance?

Vue instance is the core of your Vue application. The Vue instance contains everything that we use in our application: data, methods, components, etc. 


What is data binding

Data binding is the process that establishes a connection between the HTML and the Vue instance. We accomplish this by using a few Vue specific directives such as v-model and v-text. I'll explain more about the data binding in the next chapter.

You don't have to memorize all of Vue directives; just remember that they all start with v-.


Creating our first Vue instance

Let's create our first Vue instance: (this is the same sample code in my JSFiddle Vue Playground that you may use for practicing):

new Vue({
el: '#app',
data: {
message: 'Hello VueJS students!'
}
});

And bind it to our HTML code:

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

Example explained:

VueJS starts automatically when the web page has loaded (since we created a Vue instance).

The "el" specifies the scope of our Vue application. I chose a "div" with the ID of "app". 

The "data" object contains all the data that we're going to bind to our HTML. In this case it's just a string named "message" .   

The div with the ID of "app" is the container of our Vue application. 

The mustache like syntax ( {{ }} ) prints the "message".

Only the code inside the div with the ID of app is accessible by the Vue instance. 

The ID of the container div could be anything. Just remember whatever you choose, you must initialize it in your Vue instance as the value for el


Comments: