What Is The Vue Instance?
Before we can start to do anything with VueJS on our webpage, we first need to create a way for Vue to initialize and then ‘bind’ itself onto that page.
Just as in jQuery, nothing happens until we initialize our document ready function, like this:
$( document ).ready(function() { console.log( "ready!" );});
In Vue, nothing happens until we create our Vue Instance, like this:
<script>
new Vue({
el: '#app'
data: {
}
})
</script>Within the bounds of this Vue Instance, which is just a simple JavaScript object, we can write the code that Vue will recognize and then execute onto the page.
Let’s first take a deeper look into what is actually going on with this Vue instance object, and then we will talk more about what it can allow us to do on our HTML page specifically, and how it unlocks the magic of Vue.
Inside The Vue Instance Object
On the first line, we begin with the instantiation of our class object, which bears the title of Vue, like this:
new Vue({ }}
This creates and initializes the Vue instance within our browser.
Next, within our created Vue instance, on the first line of our object, we add in our ‘el’ option, which looks like this:
new Vue({
el: '#app'
})What this ‘el’ option does is simply ‘bind’ our Vue Instance to an element within our HTML (in this case, one with an ID of ‘#app’), allowing us to apply our Vue functionality to everything that is within that element.
Putting it all together, it would look like this:
<div id='app' </div>
new Vue({
el: '#app'
})As you can see, our <div> element, with an ID of ‘#app’ has been bound to our newly created Vue Instance. Another way that we can refer to this ‘binding’ of an element by Vue within the Vue instance is as a ‘mounting’ of, or to ‘mount’, an element. It means the same thing. Simply that we have attached our Vue instance to that element, in order to activate Vue’s functionality within that element.
A key difference to note here, coming from jQuery, is that rather than applying functionality to the entire webpage, as is done with jQuery, in Vue, functionality is only applied to a specific section of the page – one that is bound to a Vue instance (of which there can be many). In this case, our <div> element, with an ID of ‘#app’.
Lastly, we have our ‘data’ option. Which as you’ll see soon, is one of the most important parts of our Vue instance in terms of functionality. It looks like this:
new Vue({
el: '#app'
data: {
someText: 'helloThereText'
}
})As you can see here, after creating our Vue instance and then mounting it onto our ‘#app’ element, we then set some data within our instance. This gives our mounted <div#app> element access to the data that is within our Vue instance object.
That data can now be used directly within our mounted HTML element, like this:
<div id='app'>{{ someText }}</div>
By placing the data variable from our instance within double curly braces, we allow Vue to recognize and then ‘interpolate’ the data as being from our Vue instance, in the example above. This data is then transformed into the text that it contains within the mounted HTML element.
On page load, the data held within our ‘someText’ variable above will be displayed out onto the loaded page as the text, ‘helloThereText’.
How The Vue Instance Unlocks The Magic Of VueJS
So from the example above, we can see that a Vue Instance is basically an object that is created in order to allow us to attach Vue functionality to our HTML.
Let’s now take a slightly closer look at what the Vue instance is and what it can do. The explanations below will aid you greatly in getting a deeper understanding of what Vue can do for you, and in general, what Vue is all about.
A Data-Driven Approach To UI Manipulation
Because Vue is primarily ‘data-driven’, which means that what happens on the page is simply a reflection of what happens in the data held by Vue, along with the changes to that data, the Vue instance can be thought of as a syncing agent that simply translates changes in the data held by Vue, to changes in our UI. And by doing so, keeps our data -> view connection ‘in sync’.
An example of this can be seen with the way that view allows us to handle conditional logic on our HTML page.
Below we are displaying or hiding an element within our Vue instance, depending on whether or not data (as a variable within our data object) is set to either true or false.
<div id='app'>
<h1 v-if="is_it_true">{{ someText }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
someText: 'helloThereText',
is_it_true: true
},
});
</script>In the current way that it is set up (with Vue’s v-if attribute, Vue attributes allow us to add Vue functionality directly to our HTML elements), our h1 shown above will show on page load. With the text ‘helloThereText’.
If we were to change the value held by our is_it_true variable within our data option to false, the h1 will disappear.
This is what we mean when we say that Vue is data-driven. It is driven, and changes on the webpage are made, by what happens in the data that is held by its instances.
The Vue instance, by giving us a simple ‘command center’ where we may set, and when necessary change our data, helps us to unlock the magic that is data-driven Vue.
To be the first to know when we publish a new post or book, you may also subscribe to our email list below