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

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

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

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

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

<template>
	{{ text }}
</template>

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

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

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

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

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

กำหนดคุณสมบัติ text ให้แสดงเนื้อหา ของคุณสมบัตินี้ในย่อหน้าใดย่อหน้าหนึ่ง

กำหนดปุ่ม สร้างให้เมื่อคลิก ที่ปุ่มนี้ ค่าของคุณสมบัติ text จะเปลี่ยนเป็นค่าอื่นโดยการตอบสนอง

กำหนดปุ่มสองปุ่ม สร้างให้เมื่อคลิก ที่ปุ่มแรก ค่าของคุณสมบัติ text จะเปลี่ยนเป็นค่าหนึ่งโดยการตอบสนอง และเมื่อคลิกที่ปุ่มที่สอง - จะเปลี่ยนเป็นค่าอื่น