Introduction to Vue.js Instance
What are Vue Instances?
We can access the instance from anywhere in the scope of the program. But in an instance, we can only access the properties defined for that instance by using THIS keyword. In other words, there is no direct connection between the two instances in a program.
Properties / Options in Vue.js Instance: Since the MVVM pattern also contains binding HTML elements with VueJS. But to bind Vue instance with DOM elements, we have some special properties along with a Vue Instance. The properties are:
Let’s understand each of these options in brief with an example:
2. Data: It is one of the most important properties of an instance. All the data properties are stored to be used in a program and complied when the instance is created. We can bind data elements with DOM for dynamic reaction on the webpage instead of reloading the entire content. We can store any type of data element in this option, generally all possible data elements used in VanillaJS are valid here. Example:
As explained in the example, the <h1> tag will replace its content based on changes made on the NAME variable created in the Vue instance. This process is termed as Binding, generally used to achieve the dynamicity of the webpage.
3. Methods: Every Vue instance can have its own set of functions/methods for a modular program structure. There are few inbuilt function definitions for an instance (From instance life cycle). We can also define our own set of functions in the “METHODS” property. They are compiled along with data properties on the creation of an instance. Example:
As explained in the example, we can access data items via instance methods and can be bound with the DOM element.
4. Computed: It helps us perform calculations and transformations on our data. They are meant to transform data items for presentation only, they don’t change the actual existing data. This is a dependent property, in other words, the computed property is cached based on the reactive dependencies of the data elements.
In computed property, it is aware whether the function inside it is affected by changes in any data property. Example:
OUTPUT: John Dave
5. Watch: This property is widely used when implementing dynamic webpages. It executes method/code upon data changes. It automatically executes code when there are any changes from any other method or user interaction with the webpage. The only prerequisite of implementing WATCH is to have associated data property in the instance.
Generally, it is used when we want to do some asynchronous task (Retrieve information from the server). Example (On button click, the value of Counter will change):
Counter : 10
6. Template: This property is responsible to create HTML elements from instance. It simply replaces the content inside the property with the DOM. On compilation, it just places the HTML elements into virtual DOM and when required it gets placed to actual DOM. Example:
OUTPUT: Hello World
This concludes the topic of Vue Instance, covering all the instance properties and their working with appropriate examples.