Vue.js is revolutionary framework in an era of lightweight and faster loading interface development by frontend developer. It is younger than many popular front-end development frameworks like Angular, backbone etc. also become popular in the vuejs software development companies in India in short period of time.
Evan You is founder and creator of Vue.js who an ex-employee of Google and notable contributor for Angular JS. He worked on many AngularJS Projects. With this knowledge of AngularJS, he thought of creating a light-weight framework that is easy to understand and simple to implement.
Below are some of the key points that will start our tour of leaning Vue.js at a beginning level which is serving by leading Vue.js application development company in India.
- The Vue Instance
- Data & Methods
- Data Binding
- Event Modifier
Let us start with the installation of VueJs.
You can install VueJs by following way:
As per our recommendation download VueJs development version file from Download and simply include or use CDN link in your webpage:
For production version of your published site, replace vue.js with vue.min.js for faster loading and speed optimization compare to development environment. It is smaller build for optimized speed experience.
We can us NPM method when developing large scale or complex application with Vue.js . For installing using NPM follow below steps:
- Open CMD from your project folder
- Run below command: npm install Vue
This will install node library with Vue packages.
When you are going to develop a one-page web application using Vue.js then this method of installation gives you the standard structure of modern front application development. Run below command to get Vue.js project fresh setup. For the same you need to open CMD from your project folder and execute command step by step:
- npm install - -global vue-cli
- vue init webpack my-project (write your project name instead of my-project)
- cd my-project
- npm install
- npm run dev
The Vue Instance:
Every VueJs application starts with the new Vue instance. We can create Vue instance using Vue function:
Here Vue instance assign to vm variable. Now we can often use vm to access Vue instance in application.VueJS
Output: Hello Vue!
For Vue there is one parameter named el. The value of this parameter will be id of div which is defined in body tag of your file.
Data & Methods
Any application instance is to render data or view as per their requirement. In the above example, you can see the message variable is a part of the data attribute of vue instance. Now we check method with the following example:
As above example gives you 4 as output. Here you can check that methodsquare() method is called by instance vm and it will update the value of a variable to 4 which is the square of 2. You can define method in VueJs in methods attribute.
Here created hook is executed after Vue instance is created. There is more Vue life cycle hooks named mounted, update and destroy.
Life Cycle of VueJs is as follow:
v-modal has correctively updated the element based on the entered value in inputs like textbox or text area.
Here msg string update at a same time when you will have typed in input box. it is two-way data binding.
We can bind Class and CSS using v-bind: class in VueJs. Let we check it with example:
There is following type of event modifier available:
Source of this example is VueJs.org