Sự khác biệt giữa @click và v-on: nhấp vào Vuejs

160

các câu hỏi nên đủ rõ ràng :). Nhưng tôi có thể thấy ai đó sử dụng:

<button @click="function()">press</button>

Ai đó sử dụng:

<button v-on:click="function()">press</button>

Nhưng thực sự sự khác biệt giữa hai (nếu tồn tại)

vue.js vuejs-directive

— LorenzoBerti
nguồn

189

Không có sự khác biệt giữa hai, một chỉ là một tốc ký cho thứ hai.

Tiền tố v đóng vai trò là một dấu hiệu trực quan để xác định các thuộc tính dành riêng cho Vue trong các mẫu của bạn. Điều này hữu ích khi bạn đang sử dụng Vue.js để áp dụng hành vi động cho một số đánh dấu hiện có, nhưng có thể cảm thấy dài dòng cho một số lệnh được sử dụng thường xuyên. Đồng thời, nhu cầu về tiền tố v- trở nên ít quan trọng hơn khi bạn xây dựng một SPA nơi Vue.js quản lý mọi mẫu.

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

Nguồn: tài liệu chính thức .

— Cobanway
nguồn

1

Có ưu tiên cộng đồng Vue đối với @ hay đó chỉ là ưu tiên của JetBrains để phàn nàn về việc sử dụng v-on?

— Kimmo Hintikka

5

@KimmoHintikka Vâng, bằng cách nào đó, có một ưu tiên đối với phím tắt (@). Quy tắc được bao gồm trong strongly-recommendedvà recommendedcác cài đặt trước eslint-plugin-vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/ory

— Cobaltway

63

v-bindvà v-onlà hai chỉ thị được sử dụng thường xuyên trong mẫu html vuejs. Vì vậy, họ đã cung cấp một ký hiệu viết tắt cho cả hai như sau:

Bạn có thể thay thế v-on:bằng@

v-on:click='someFunction'

như:

@click='someFunction'

Một vi dụ khac:

v-on:keyup='someKeyUpFunction'

như:

@keyup='someKeyUpFunction'

Tương tự, v-bindvới:

v-bind:href='var1'

Có thể được viết như:

:href='var1'

Hy vọng nó giúp!

— Nitin Kumar
nguồn

@LorenzoBerti làm thế nào về câu trả lời này. Nó có giúp bạn hiểu thêm không?

— Nitin Kumar

Câu trả lời không giải thích bất cứ điều gì, chỉ đưa ra ví dụ 1/3 trong số đó không phù hợp với câu hỏi được hỏi. lấy làm tiếc.

— Jakub Strebeyko

v-bind và v-on là hai chỉ thị được sử dụng thường xuyên trong mẫu html vuejs. Vì vậy, họ đã cung cấp một ký hiệu viết tắt cho cả hai tôi nghĩ rằng điều này giải thích câu hỏi. đó cũng là lý do được cung cấp trong tài liệu cue js :-)

— Nitin Kumar

Vấn đề là câu trả lời đã được đăng 4 tháng sau đó, không có liên kết, không trích dẫn và ném vào tốc ký kết cho v-bind, điều đó thực sự có thể gây thêm nhầm lẫn.

— Jakub Strebeyko

2

Chúng có thể trông hơi khác so với HTML thông thường, nhưng: và @ là ký tự hợp lệ cho tên thuộc tính và tất cả các trình duyệt được hỗ trợ Vue.js có thể phân tích chính xác. Ngoài ra, chúng không xuất hiện trong đánh dấu kết xuất cuối cùng. Cú pháp tốc ký là hoàn toàn tùy chọn, nhưng bạn có thể sẽ đánh giá cao nó khi bạn tìm hiểu thêm về cách sử dụng sau này.

Nguồn: tài liệu chính thức .

— pháp
nguồn