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.