การตอบสนองในเฟรมเวิร์ก Vue

การเปลี่ยนแปลงใด ๆ ของข้อมูลจาก data จะนำไปสู่การเปลี่ยนแปลงการแสดงผลของข้อมูลนั้นบนหน้าเว็บทันที พฤติกรรมของ Vue แบบนี้เรียกว่า การตอบสนอง

มาลองทดสอบในทางปฏิบัติกัน สมมติว่าเรามีคุณสมบัติต่อไปนี้:

javascriptdata() {
  return {
    text: 'xxx',
  }
}

มาแสดงค่าของคุณสมบัตินี้:

App.vue<template>
  {{ text }}
</template>

สร้างปุ่ม เมื่อกดปุ่มนี้ คุณสมบัติของเราจะเปลี่ยน:

App.vue<template>
  {{ text }}
  <button @click="change">text</button>
</template>

ทีนี้มาเขียนเมธอดที่จะถูกเรียกเมื่อคลิกปุ่ม และเปลี่ยนแปลงคุณสมบัติ:

App.vuemethods: {
  change: function() {
    this.text = 'yyy';
  }
}

ถ้ารวบรวมโค้ดทั้งหมดเข้าด้วยกันแล้วกด ที่ปุ่ม - ข้อความบนหน้าจอจะตอบสนอง เปลี่ยนเป็นข้อความอื่น