Hey Vue? What’s up? What’s the deal?

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?

In simple words, Vue is a progressive JavaScript framework for building user interfaces on the web. You might be thinking why you should learn yet another JavaScript framework when there are already the big ones like Angular, React, Ember, etc. There are a lot of differentiating factors here and one of them is, Vue being a progressive framework.

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.

Since Vue has a lean core that works well alone and is mostly focused on declarative view rendering (which we will be looking into in our upcoming articles) and component composition, it is fairly easy for developers with intermediate knowledge on HTML, CSS, and JavaScript to jump right in and get started. It can be easily embedded into existing front-end code.

It is approachable (with time-travel debugging, hot-reloading, components etc.), versatile, performant, maintainable, and testable as well.

Some of the notable Vue.js concepts that differentiate it from other JavaScript frameworks are,

1. Reactivity – Keeping the state and view in sync
2. Components – Reusable Vue instances to structure complex interfaces
3. Modularity – Each component along with its HTML, CSS, and JavaScript can be made modular
4. Animations – Vue has a built-in transition system
5. SPA routing, state management, project scaffolding, browser DevTools extension, etc. – We have vue-router, vuex, vue-cli, vue-devtools respectively!

Browser Compatibility

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.

Backstory

Vue was founded by Evan You which first started as a personal project in 2013. He was working at Google back then and his job involved building UI prototypes for which he used vanilla JavaScript and Angular 1. His words were, “I figured, what if I could just extract the part that I really liked about Angular and build something lightweight.” That is the very thought which made him start Vue.

He was born in China, in a city called Wuxi close to Shanghai. Attracted to JavaScript, he learned to programme primarily from reading other people’s code, online resources, and books. He is not a computer science major. Before working full time on Vue, he was at Google and Meteor.

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”)
• Expectation: Beginner (strong in basic concepts) to an Intermediate level knowledge of HTML, CSS, and vanilla JavaScript
• Prior Experience with other JavaScript frameworks is not required.
• 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

Roadmap

Get ready to build your first application with Vue.js. The below list will be updated constantly.

Vue.js Fundamentals

• 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
• Form input bindings
• Computed properties
• Let’s watch for changes with watchers
• Class bindings
• Inline style bindings
• 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!