Learning Vue.js

#vue #angular #javascript

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.

	// In Vue.js
	<div id="app-3">
	<span v-if="seen">Now you see me</span>
	</div>

	// In Angular
	<div *ngIf="seen" class="name">Now you see me</div>

view raw comparison.js hosted with ❤ by GitHub

	// Vue.js
	<div id="app-4">
	<ol>
	<li v-for="todo in todos">
	{{ todo.text }}
	</li>
	</ol>
	</div>

	// Angular
	<ul>
	<li *ngFor="let hero of heroes">{{hero.name}}</li>
	</ul>

view raw for.js hosted with ❤ by GitHub

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.

	// Vue.js - event binding
	<div id="app-5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">Reverse Message</button>
	</div>

	// Vue.js - property binding
	<div v-bind:class="classObject"></div>


	// Angular - event binding
	<button (click)="share()">
	Share
	</button>

	// Angular - property binding
	<app-product-alerts
	[product]="product">
	</app-product-alerts>

view raw binding.js hosted with ❤ by GitHub

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.

	// Vue.js
	// This can take two parameters
	<button v-on:click="$emit('enlarge-text', font-size)">
	Enlarge text
	</button>

	// Angular
	@Output() valueChange = new EventEmitter();
	counter = 0;
	valueChanged() {
	this.counter = this.counter + 1;
	// valueChange is and eventemitter in this case
	this.valueChange.emit(this.counter);
	}

view raw eventemitter.js hosted with ❤ by GitHub

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.

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE