Trong Vue.js, v-bind và v-on là hai directives (chỉ thị) quan trọng được sử dụng để liên kết dữ liệu và lắng nghe sự kiện trong giao diện người dùng. Để làm cho việc viết mã ngắn gọn hơn và dễ đọc hơn, Vue.js cung cấp các shorthands (rút gọn) cho hai directives này. Dưới đây là các kiểu shorthands cho v-bind và v-on:

1. v-bind Shorthands:

Attribute Binding Shorthand (:): Thay vì sử dụng v-bind để liên kết một thuộc tính HTML với một biến dữ liệu, bạn có thể sử dụng :. Ví dụ:

<!-- Với v-bind -->
<div v-bind:id="myId"></div>

<!-- Sử dụng shorthand -->
<div :id="myId"></div>

2. v-on Shorthands:

Event Handling Shorthand (@): Thay vì sử dụng v-on để lắng nghe sự kiện, bạn có thể sử dụng @. Ví dụ:

<!-- Với v-on -->
<button v-on:click="handleClick"></button>

<!-- Sử dụng shorthand -->
<button @click="handleClick"></button>​

Event Modifier Shorthand (.): Khi sử dụng các event modifiers như .stop, .prevent, .capture, .self, .once, bạn có thể sử dụng shorthand .. Ví dụ:

<!-- Với v-on -->
<button v-on:click.stop="handleClick"></button>

<!-- Sử dụng shorthand -->
<button @click.stop="handleClick"></button>​

Sử dụng các shorthands giúp mã nguồn của bạn trở nên ngắn gọn và dễ đọc hơn, đồng thời giảm thiểu sự lặp lại và làm tăng tính tương tác của giao diện người dùng.

​