Learning Vue.js
Tags: vue, angular, javascript
Published: 2020-05-16 00:54:41

---
title: Learning Vue.js
published: true
description: A short observation of an Angular Developer taking a foray into the world of Vue.js
tags: Vue.js, Angular, JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u91gkvu2zaf4vd7hm1kp.png
---
Hello there!

My first introduction to JavaScript frameworks and libraries was sometime in October 2018 and the framework was Angular. Almost two years down the line, I have relatively tried nothing else, Apart from some contributions I made to [a friend's React project](https://github.com/MichaelGee/newsrack) very recently, I only have a [ToDo application](https://github.com/Benneee/CartApp) written in React and that's all, however, [most of my projects](https://github.com/Benneee/), both work, and side projects are/were created using Angular.

I recently built the back-end for my personal website using Node.js and Express, this comes off the heels of taking some months to dive into another JavaScript framework and the Back-end as I've been a Front-end developer all my dev-life. I wanted to understand the MEAN Stack, so Node.js made sense at the time. I wrote about that journey [here](https://dev.to/benneee_/learning-node-js-express-1-3ckj), it also involved an [open-source contribution](https://github.com/mdn/express-locallibrary-tutorial/pull/83) to MDN's Tutorial on Node.js and Express. 🙌 

I recently started learning Vue. I am currently using Vuemastery and I have so far enjoyed the simplicity of the beginner track course and the method they have adopted. As some of you would expect, I went into the course looking for similarities and differences between my comfort zone, Angular, and Vue.js, this is partly due to statements I have heard and read about Vue.js in the past. One of them is *Vue.js takes the best parts of Angular and React*.

I am still very much a beginner in Vue.js, I have not even used the Vue CLI as I am thoroughly enjoying the script tag for now, but I have so far been able to draw up a few points of similarities or differences between Angular and Vue.js. 

#### Disclaimer: I still have not used the Vue CLI, the next set of points are from my experience using the Vue.js starter script tag.

* I immediately understood the Vue Instance as the heart of the Vue application, this was easily comparable to the app-component in an Angular application. My views on this particular point might change when I have to create a Vue.js project with its CLI.


* We have [structural directives](https://angular.io/guide/structural-directives) in Angular, three of the common ones are NgIf, NgFor, and NgSwitch. Vue.js has v-if, v-for, and v-else, e.t.c. I like how v-show is present in Vue.js, we had NgShow in AngularJS, but NgIf in Angular2++ has us covered to a good extent, even though it has its quirks (like using the NgIf directive when working with ChartJS in Angular), you are better off using the 'hidden' attribute instead.

  {% gist https://gist.github.com/Benneee/0aef08f3510c993ed7b5123ad495833d.js %}

{% gist https://gist.github.com/Benneee/f237eed762f2a2ba6c5db0182d105f2c.js %}

* Part of the things I had to pick up early in Angular was communication between components and events played a major part in this aspect. I am yet to find the equivalent of Angular's Input and Output in Vue.js, however, in the case of events, it is pretty straightforward to understand it the way I understood events and property binding in Angular.
I would say 'v-on' or '@' for event binding in Vue.js, round brackets, '()' for event binding in Angular.
I would also say 'v-bind' or ':' for property binding in Vue.js, square brackets, '[]', for property binding in Angular.

{% gist https://gist.github.com/Benneee/f96ded26bd8d884a2558b2534178c4d5.js %}

* For transmission of events in Angular, we use the EventEmitter and its emit method, while in Vue.js, there is the component's $emit method. I also like how flexible it is to use the $emit method, especially how you can pass arguments to it in the process, two arguments - the event and perhaps, if needed, an ID. In Angular, we pass the $event as a parameter.

{% gist https://gist.github.com/Benneee/9a74bcdc7ca5e5f7bed9501fe40d0cf0.js %}

I have also seen the presence of props in Vue.js as I created my first Vue.js component last night ☺️, this is a similarity with React, if it is used in the same way, that's still something I will have to discover as I continue the journey.

I hope to turn this into a series and I am looking forward to more similarities or differences as these comparisons help me understand Vue.js even better, with my background as an Angular developer playing a huge role.

Kindly drop comments if I missed out anything, no spoilers please, thank you.