Learn VUEJS Tutorials in 8 Days
web interfaces.The view layer can be designed with the help of Vue.The first version of VueJS was released in Feb 2014.
The most promising features used by Vue are,
- Virtual DOM
- Event Handling
- Computed Properties
- Vue CLI
The virtual DOM is between Actual DOM and VUE Instance.Whenever you make any changes to DOM element ,it will actually happen in Virtual DOM instead of
Actual DOM.When application grows bigger and bigger the cost of updating DOM is cumbersome.So the art of updating to Virtual DOM instead of updating
the Real DOM saves time.
Advantage of using Virtual DOM:-
The virtual DOM used in Vue allows to minimize the number of times updation of DOM.
What is Data Binding?
Databinding is used to bind data sources from the giver and taker.It synchronize them at the time of retrieval.
In databinding , whenever the data is changed then it is immedietely reflected by the elements.
The components are said to be reusable Vue.js instances.You can reuse a component again and again in a website.
It is used to create custom elements which can be reused in HTML.
The components can be reused many times within another component.
The Data,Computed , watch and Methods can be used in the component.
In Vuejs, the syntax for handling event is v-on directive.This v-on directive can be used as attribute to the DOM element.
for eg:- Let us say we need to handle click event for a button. We can add like the below
We can also use alternative to this v-on directive as by using @ symbol
Computed properties are just like a method.We can able to write complex logic in computed properties and call the computed properties like an array in iteration.
The computed properties return a value like a method.But here we call it like a property.
Let us say we want to filter the names from the textbox.Normally we will write the filter logic in computed property and we can call this computed proptery
directly in vue HTML part.
and we can call the above computed property directly in vue part like the below.
Vuejs gives us HTML based templates that bind the rendered DOM with Vue Instance data.
Vue compiles the templates into Virtual DOM Render functions.
Directives are the one which modifies the behaviour of DOM elements.We can perform various operations of HTML elements by using Vue Directives.
For eg:- The following situations are using directives:
a) We can hide or show HTML elment using directives - Directive(V-Show)
b) We can bind data changes in the script to be refected on front end.(otherwise called as Two Way Data Binding)- Directive(V-Model)
c) We can use inbuilt directives for conditional checking. - Directives(v-if,v-else)
d) We can use inbuilt directives for iteration. - Directives(v-for)
The Vuejs Watch property is used for modifying the data on change of the property.
Routing is very helpful in navigating from one page to another page.For example, i need to navigate from "Home" page to "Contact" page.
The Vue CLI should know the basic knowledge of Nodejs.It provides the quick scaffold a new project via vue create,run server using npm run serve etc.
The command to install vue in the input terminal.
npm install -g @vue/cli