Purpose

The Progressive JavaScript Framework

Vue.js is a JavaScript framework with optional tools for user interface in web development. With Vue we can make applications faster, more attractive and user friendly. VueJS was created by Evan You who at the time worked for google prototyping in the web browser using Angular. In coming up with the vue framework, You figured he would just take parts of angular he really liked and built something lightweight without all the extra concepts involved with Angular.

Syntax wise, vue is kind of like Angular and will look similar to it (e.g. v-if vs ng-if).However, if we were to compare VueJs to another framework, it would be React as they both:

Utilize a virtual DOM
provide reactive and composable view components
maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries

Vue does point out point out where React takes the wheel from them, for example in the richness of their ecosystem and abundance of their custom renderers. But where React is outshined by vue in:

Optimization Efforts - removes the need for a whole class of performance optimizations
HTML & CSS - React, everything is just JavaScript. Not only are HTML structures expressed via JSX, the recent trends also tend to put CSS management inside JavaScript as well. Vue embraces classic web technologies and builds on top of them.
Scale - Finally, Vue offers a CLI project generator that makes it frivolously easy to start a new project using your choice of build system. React is also making strides in this area with create-react-app, but it currently has a few limitations:
It does not allow any configuration during project generation, while Vue’s project templates allow customization
It only offers a single template that assumes you’re building a single-page application, while Vue offers a wide variety of templates for various purposes and build systems.
It cannot generate projects from user-built templates, which can be especially useful for enterprise environments with pre-established conventions.

Learn

Tutorials From Around The Web

VueJS being one of the most popular JavaScript frameworks has a ton of free tutorials out there and they all represent the same information. Some brief history, how to install, the syntax used and some examples to follow to create your first app(a list of some kind). Requirements to understand and implement this framework would be basic knowledge of HTML, CSS, and JS.

VueJs is a frontend framework so its main focus is on the view layer and can be easily integrated into big projects for front-end development without any issues. Features used in VueJs are:

Virtual Dom - Changes made to a dom replica in the form of JavaScript data structures. When changes are to be made, they are made to the JavaScript data structures and then compared to the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.
Data Binding - Data binding helps manipulate or assign values to HTML attributes, change the style, and assign classes with the help of a binding directive called v-bind.
Components - This feature creates custom elements, which can be reused in HTML.
Event Handling - v-on is the attribute added to the DOM elements to listen to the events in VueJS.
Animation/ Transition - VueJS has a built-in transition component effect and we can easily add third party animation libraries to add more interactivity to the interface.
Computed Properties - A very important feature that will listen to the changes made to the UI elements and performs the necessary calculations.
Directives - VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model, which are used to perform various actions on the frontend.
Watchers - Watchers are applied to data that changes like form input elements. We won’t have to add any additional events, this feature takes care of handling any data changes making the code simple and fast.

Community

Vue Hangouts

VueJs has many communities around the web for discussion. The reddit community for example has many instances where people ask a question or mention a area of difficulty and people in the community are quick to respond with solutions or tips. The downside of sites like reddit however, is that people will sometimes go in on you for asking a “noob” question that can be found in the documentation. Its best to always refer to the documentation before asking a question because responses can be brutal at times.

Showcase

Redredefind has a very cool website! Their color scheme and use of animations is great! I also really like how simple yet interactive Happy Plants is. From inspecting the site we can see that they use lots of virtual dom to make changes to the web page and animations. I don't have many dislikes to this site other than its font and color scheme.

VueJs is the perfect beginner framework because of how easy it is to use. The benefits of using vueJs are many but my favorite part of it is that it cuts several lines of code in to a few. The documentation is pretty easy to follow and so are the tutorials. I’d say Vue is the perfect topping onto your vanilla JS ice cream.

Source

Where I site my sources