Usage of directive shorthand syntax

[MarcusTXK]

What feature(s) would you like to see in RepoSense

Removal of explicit directives will help to make the code less verbose and will follow Vue's Style Guide strongly recommended rules for directive shorthands. For the .vue files, let's adopt the following rules of using directive shorthands:

• : for v-bind:
• @ for v-on:
• # for v-slot

Example: Removal of explicit v-bind directive, such as replacing <div v-bind:id="dynamicId"></div> with <div :id="dynamicId"></div> syntax instead.

[ckcherry23]

For the .vue files, we are currently following the rule of using directive shorthands (: for v-bind:, @ for v-on: and # for v-slot) always or never (we are never using it). Hence, adopting the directive shorthand for v-bind will mean we change v-on and v-slot as well.

While the directive shorthands can make the code less verbose, their purpose may still be unclear to new contributors. So, I think we should discuss the pros and cons before anyone takes up this issue.

[MarcusTXK]

Good catch! Let me update this issue to make it more general to update all notations to use shorthand.

I definitely agree that it might make it less clear to people who are new to Vue, but I feel that the learning curve for the shorthands should be quite manageable. The main motivation behind this change was as I saw that the Vue guide stated that they would use shorthand syntax in code examples, as that's the most common usage for Vue developers, so it might be a good idea to follow the common standard.