You guessed it right. In this Vue Js tutorial, We are going to talk about Vue.js. A lot! Just pronounce it like the word, “view”.
What is Vue.js?
More on the progressive framework part – Vue is incrementally adoptable. That is, it adapts from being a core library that just focuses on the view layer to an entire framework with an ecosystem of supporting libraries and packages based on a project’s inherent complexity. Vue can thus easily tackle the complexities of sophisticated SPAs (Single Page Applications). Here is an exhaustive list of supporting libraries.
For example, you can just use Vue in one part of the application (view layer) to provide an interactive experience. Or, maybe you decide to solve other common front-end needs such as state management, routing, fetching data, scaffolding, hot-reloading etc., Vue has the ecosystem required to scale. So, it is a framework that you can progressively opt-in to.
It is approachable (with time-travel debugging, hot-reloading, components etc.), versatile, performant, maintainable, and testable as well.
- Reactivity – Keeping the state and view in sync
- Components – Reusable Vue instances to structure complex interfaces
- Animations – Vue has a built-in transition system
- SPA routing, state management, project scaffolding, browser DevTools extension, etc. – We have vue-router, vuex, vue-cli, vue-devtools respectively!
Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported) – as per the official vue.js GitHub page.
Comparison with other big frameworks
It is similar to React in terms of reusable components and not having a router of its own. It draws its inspiration of data binding from Angular. So Vue basically mixes the best of Angular and React. I am not going to dive deep into this but if you are interested, have a look at the official documentation about this very topic.
Vue was officially released as a project on February 2014. In just two years, Vue reached 2,000,000 downloads.
Who is Vue.js tutorial for?
- Target audience: Front-end developers, full-stack developers or any enthusiastic developer is on-board!
- Vue Level: Beginner (“Newbies”)
- A step by step explanation along with screenshots and code snippets will be provided wherever required
- Visual Studio Code will be used in the examples. You are welcome to try out any IDE of your choice viz., Sublime Text, WebStorm, Atom, etc.
- The code discussed as part of each post will be updated in the GitHub repo
Get ready to build your first application with Vue.js. The below list will be updated constantly.
- Hello World with Vue.js
- Template Syntax and a glimpse into Reactivity
- Introduction to Vue directives
- Vue Devtools Setup
- Data binding Part 1 (Text, raw HTML, JS expressions)
- Data binding Part 2 (Attributes)
- Conditional rendering Part 1 (v-if, v-else-if, v-else)
- Conditional rendering Part 2 (v-if and v-show)
- Rendering Lists Part 1 (Iterating over arrays)
- Rendering Lists Part 2 (Iterating over objects)
- Listening to DOM events and event modifiers
- Listening to keyboard and mouse events
- Let’s use shorthands
- Two-way data binding with v-model
- Value bindings (checkboxes, radio buttons and multi-select)
- Computed properties
- Let’s watch for changes with watchers
- Binding HTML classes
- Binding CSS styles
- Vue Instance – Deep Dive
- How are data and methods handled in a Vue instance?
- Vue Instance – Lifecycle hooks and a diagrammatic representation
Advanced Vue.js – Vue CLI, components
Keep watching this space, and you will be practicing Vue.js in no time.
See you soon. Have a great day!1. Hello World with Vue.js >>