ความแตกต่างระหว่าง @click และ v-on: คลิก Vuejs

คำถามควรชัดเจนพอ :) แต่ฉันเห็นว่ามีคนใช้:

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

มีคนใช้:

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

แต่จริงๆแล้วอะไรคือความแตกต่างระหว่างสอง (ถ้ามี)

ไม่มีความแตกต่างระหว่างสองอย่างใดอย่างหนึ่งเป็นเพียงการจดชวเลขสำหรับที่สอง

คำนำหน้า v ทำหน้าที่เป็นคิวภาพสำหรับการระบุคุณลักษณะเฉพาะของ Vue ในแม่แบบของคุณ สิ่งนี้มีประโยชน์เมื่อคุณใช้ Vue.js เพื่อใช้พฤติกรรมแบบไดนามิกกับมาร์กอัปที่มีอยู่บางส่วน แต่สามารถรู้สึกได้ถึงคำสั่งที่ใช้บ่อย ในเวลาเดียวกันความต้องการคำนำหน้า v มีความสำคัญน้อยลงเมื่อคุณสร้าง SPA ที่ Vue.js จัดการทุกเทมเพลต

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

ที่มา: เอกสารอย่างเป็นทางการ

v-bindและv-onเป็นคำสั่งที่ใช้บ่อยสองคำสั่งใน vuejs html template ดังนั้นพวกเขาจึงให้การจดชวเลขสำหรับทั้งคู่ดังต่อไปนี้:

คุณสามารถแทนที่v-on:ด้วย@

v-on:click='someFunction'

เช่น:

@click='someFunction'

ตัวอย่างอื่น:

v-on:keyup='someKeyUpFunction'

เช่น:

@keyup='someKeyUpFunction'

ในทำนองเดียวกันv-bindด้วย:

v-bind:href='var1'

สามารถเขียนเป็น:

:href='var1'

หวังว่ามันจะช่วย!

พวกเขาอาจดูแตกต่างจาก HTML ปกติเล็กน้อย แต่: และ @ เป็นตัวอักษรที่ถูกต้องสำหรับชื่อแอตทริบิวต์และเบราว์เซอร์ที่สนับสนุน Vue.js ทั้งหมดสามารถแยกวิเคราะห์ได้อย่างถูกต้อง นอกจากนี้จะไม่ปรากฏในมาร์กอัปที่แสดงครั้งสุดท้าย ไวยากรณ์ชวเลขเป็นทางเลือกโดยสิ้นเชิง แต่คุณอาจจะชอบเมื่อคุณเรียนรู้เพิ่มเติมเกี่ยวกับการใช้งานในภายหลัง

ที่มา: เอกสารอย่างเป็นทางการ