[#1955] Usage of directive shorthand syntax in .vue files

[JoanneHing]

Fixes #1955

Proposed commit message

Use directive shorthands in .vue files

This refactor removes explicit Vue directives and replaces them with
shorthand syntax, following Vue's Style Guide practices to improve
readability and reduce verbosity.

Changes include:
- Using `:` instead of `v-bind:`
- Using `@` instead of `v-on:`
- Using `#` instead of `v-slot`

[jonasongg]

Good work! Could we also change line 371 in learningBasics.md to reflect this change?

I personally think this change will not add too much of a learning curve to new developers, but it'd be good to see what you guys think @reposense/active-reviewers-1

[JoanneHing]

Good work! Could we also change line 371 in learningBasics.md to reflect this change?

I personally think this change will not add too much of a learning curve to new developers, but it'd be good to see what you guys think @reposense/active-reviewers-1

Sure I can update the documentation! About the learning curve I saw relevant discussion on the issue that I linked too. I agree with Marcus opinion that it might be a bit ambiguous for developer that are unfamiliar to Vue, but the learning curve is not steep. Updating this also align with the Vue guide to use shorthand syntax for better code quality, and I agree that is a good practice for new developer like me myself to adapt to it early.

[CYX22222003]

LGTM!

[CYX22222003]

The document is correctly updated.

[CYX22222003]

Tested on local machine, changes does not break the current frontend page.

[joeng03]

LGTM

[jonasongg]

@JoanneHing Thanks for the documentation change! I was actually referring to changing v-bind:class to :class in this line 371:

add the following to its v-bind:class attribute map

But I think what you wrote is also a great addition!

[JoanneHing]

@JoanneHing Thanks for the documentation change! I was actually referring to changing v-bind:class to :class in this line 371:

add the following to its v-bind:class attribute map

But I think what you wrote is also a great addition!

Oh! I see your point! Let me update on this!

[jonasongg]

LGTM! thank you :)

[github-actions]

The following links are for previewing this pull request:

• Dashboard Preview: https://dashboard-2290-pr-reposense-reposense.surge.sh
• Docs Preview: https://docs-2290-pr-reposense-reposense.surge.sh