Learning Vue.js

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 very recently, I only have a ToDo application written in React and that's all, however, most of my projects, 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, it also involved an open-source contribution 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 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.

• 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.

• 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.

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.