Inconsistent use of directive shorthands

[kungpaogao]

There is inconsistent use of directive shorthands (i.e., @ for v-on:, : for v-bind:, # for v-slot:). Read more here: https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended.

Login.vue

This uses shorthand @ for v-on:.

course-plan/src/components/Login.vue

Lines 20 to 26 in 376b9c2

	<div class="login-container">
	<button @click="socialLogin" class="social-button">
	<img alt="Google Logo" src="../assets/google-logo.png" />
	</button>
	<div class="login-description">Continue With Google Sign-In</div>
	</div>

Dashboard.vue

This also uses shorthand.

course-plan/src/components/Dashboard.vue

Lines 3 to 10 in 376b9c2

	<div id="dashboard-mainView">
	<semesterview
	:semesters="semesters"
	:compact="compactVal"
	@compact-updated="compactVal = $event"
	/>
	<requirements />
	</div>

Semester.vue

This one uses a mix of both? (sometimes opting for :, but mostly v-bind:

course-plan/src/components/Semester.vue

Lines 7 to 22 in 376b9c2

	<modal :id="'courseModal-' + id" class="semester-modal" type="course" :semesterID="id" />
	<confirmation
	:id="'confirmation-' + id"
	class="semester-confirmation"
	:text="confirmationText"
	/>
	<div v-if="isNotSemesterButton" class="semester-content">
	<div class="semester-top" v-bind:class="{ 'semester-top--compact': compact }">
	<div class="semester-left" v-bind:class="{ 'semester-left--compact': compact }">
	<span class="semester-name">{{ type }} {{ year }}</span>
	<img class="semester-icon" src="../assets/images/pencil.svg" />
	</div>
	<div class="semester-right" v-bind:class="{ 'semester-right--compact': compact }">
	<span class="semester-credits">{{ creditString }}</span>
	</div>
	</div>