Vue is a front end framework for developing simple and easy user interfacecs.Vue is a open source javascript framework to develop interactive
web interfaces.The view layer can be designed with the help of Vue.The first version of VueJS was released in Feb 2014.
The Vue mostly focus on lot of HTML,JavaScript and CSS files.
The most promising features used by Vue are,
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. A virtual DOM is a javascript object which is nothing but DOM.The application will update virtual DOM and not the Actual DOM.The actual DOM will completely re-render the same data while virtual DOM will maintain the state of the data without re-rendering the data. 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
<button v-on:click="buttonclick"><button>
We can also use alternative to this v-on directive as by using @ symbol
<button @click="buttonclick"><button>
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. For eg:- 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. Computed: { FilterbyUserNames() { return this.UserNames.Filter(el=>el.match(filter)); } } 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