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
- 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.
Tutorials From Around The Web
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:
- 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.
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.
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.
Where I site my sources