What is a Vue instance?

What is a Vue instance

Introduction

Vue.js framework designed on the basis of MVVM template (Model View ViewModel), which allows splitting the application into different sections for better comprehension and transparency. In this division:

“Model”

This section is related to data, ie database, data entry or even hardcode values. In the context of the Vue.js framework, this section represents a “data” property.

“View”

This section is usually the frontend part of the application used to “print” model data. The “view” section is HTML, as in other frontend libraries, but with additional functionalities that allow it to dynamically display the model. Dynamic rendering within HTML Vue.js provides with:

“Interpolation”

“Interpolation” means the processing of an expression defined within double curly brackets {{}} and printing the result at that location.

“Directives”

In addition to interpolating the rendering of HTML tag content, some of the directives can be used: “v-text“, “v-html“, “v-pre” …
But the most common use of directives is to dynamically render HTML tag attributes when we use the “v-bind” directive because we cannot render attributes with interpolation.

“ViewModel”

This section is the bridge between the two sections mentioned above and has a system for how to connect the “model” (data) to the corresponding “view”. Within it, we manipulate data from the Model before displaying it in the View section. Within the Vue.js application, this section presents some of the properties: methods, computed, or watch.

Defining a new instance

Each Vue application must have a created instance based on the Vue () constructor function. The constructor function is passed the data necessary to create a new instance through the so-called “Options object“. To create a new instance, it is enough to call the constructor function with the keyword new.

new Vue ({// this is a so-called options object})

If we need to access the properties of a Vue instance outside the instance itself, then we need to assign it to a variable created instance:

var vm = new Vue ({
   // "options object"
})

Multiple Vue instances are allowed, but each of the instances must “control” different parts of HTML, as it is not allowed to bind one instance to multiple different HTML parts. However, there is often a need to incorporate more of the same or similar recurring HTML elements (such as a product) into a web application, and yet be linked to Vue.js instances. Since it is not allowed to bind one instance to multiple different HTML parts, then, in this case, one has to create a Vue.js component and embed it several times.

EXPLANATION:
Because Vue.js is inspired by the MVVM pattern, it is often used as an instance of “vm”, which is an abbreviation of “ViewModel”.

Options Vue instance object and properties

When defining a new Vue instance, the constructor function accepts as a parameter an object through which all Vue instance options are defined. Within this object, Vue.js provides predefined properties each with its own characteristics, which allow the operation of a Vue application:

Data related properties

  • data
  • methods
  • computed
  • watch
  • props
  • propsData

DOM related properties and methods

  • el
  • template
  • render
  • renderError

The most commonly used and therefore the most important properties are: “el“, “data“, “methods“, “computed” and “watch“. The data, methods, computed and watch properties have specific privileges and act as a “proxy” to the Vue instance. This means that they pass their child properties directly to the Vue instance, and the result of this behavior is that their child properties are so-called. “Top properties” (first to instance) that can be accessed directly with “this” keyword.

“el” & “template” properties

With the “el” property, we define an HTML element that will be managed by the Vue application:

HTML

<div id = "someSelector"> </div>

JavaScript

new Vue ({
   el: "#someSelector"
})

In case we want to replace the target element with another one defined from the Vue instance, we need to use the “template” property. By defining a template, we “tread” an already targeted HTML element:

<div id = "someSelector">
     <h1> Title from an Existing Element </h1>
</div>
 
<script>
new Vue ({
     el: "#someSelector",
     template: '<h4> Template title </h4>'
});
</script>

The previous code will override the existing div element (id = “someSelector”) and will print in its place an h4 tag with the content “Template Title”

Data property

As mentioned in the Vue.js framework, the “data” property (“model” in MVVM) is a section for storing data. Vue.js converts all properties from a “data” object recursively into getter/setters to make them “reactive”. The “data” object must be simple to represent only the data, so all the browser API objects (window, document …), as well as the prototype properties of the Vue.js object, are ignored.

Properties starting with _ (underscore) or $ (dollar sign) will not act as proxies to the Vue instance, as such names conflict with internal Vue.js properties and methods.

Example

var vm = new Vue({
  data: {
    a: 1,
    b: 3
  }
})

or

var some_data = {
   a: 1,
   b: 3
}
 
var vm = new Vue ({
   data: some_data
})

After creating a Vue instance, reactive data properties can no longer be added. Therefore, it is recommended that such properties be predefined before an instance is created (for Vue.js to process and define them as reactive). It should be noted that although they cannot be subsequently added to the so-called. Root-level reactive properties, it is possible to subsequently add new properties within the already defined root-level reactive properties with the following syntax:

this.$set(this.someObject, 'b', 2)

Methods, computed & watch

It has already been mentioned that these properties represent a bridge between the “view” and the “model”, and are used to manipulate data from the Model before displaying it in the View section. More will be explained in the post itself on this topic.

Likes:
15 0
Views:
1638
Article Categories:
PROGRAMMINGTECHNOLOGY

Leave a Reply

Your email address will not be published. Required fields are marked *