สวัสดีครับ จะเป็นบทความสั้นๆนะครับ ที่เราจะมาเรียนรู้เกี่ยวกับสอง Option นี่คือ Data และ Methods ซึ่งผมจะอธิบายไปที่ละตัวพร้อมกับยกตัวอย่างครับ ดังนี้

Data

ถ้าจะพูดแบบง่ายๆ Data เป็นที่สําหรับเก็บข้อมูล หรือ State ของ Component เมื่อใดที่ Data เปลี่ยน Component นั้นๆ จะทําการ Render component ใหม่เพื่อเปลี่ยนแปลง UI ให้แสดงผลตามที่ถูกเปลี่ยนแปลงไป

Methods

Methods คือ เป็นที่สําหรับเก็บ Funtion การทํางานทั้งหมด ของ Component เช่น Function คํานวณค่าต่างๆ, Function ในการดึงข้อมูล, Function สําหรับ Event ต่างๆ ฯลฯ ตามแต่ความต้องการครับ

ตัวอย่าง Data and Methods

เพื่อให้เข้าใจการทํางานของ Data และ Methods มากขึ้น ผมสร้าง Component ตัวอย่าง ที่มีลักษณะดังนี้ หน้าจอมีการแสดงผล Counter และปุ่ม “Click to increase” โดยมีการทํางานคือ ทุกๆครั้งที่กดปุ่ม “Click to increase” จะเพิ่ม Counter ขึ้นที่ละ 1 ตัวอย่างหน้าจอตามรูป

ตัวอย่าง Source code

<template>
  <div>
      Counter: {{ counter }} <br />
      <button type="button" v-on:click="increase()">Click to increase</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increase: function () {
      this.counter++
    }
  }
}
</script>

จาก Code ด้านบน จะมี data ซึ่งจะเก็บค่า counter ไว้ โดยมีค่าเริ่มต้นเป็น 0 ซึ่ง counter จะถูกนําไปแสดงผลใน template ด้านบนด้วย ส่วน methods ผมสร้าง Function ที่ชื่อว่า increase มีการทํางานภายในคือ ไปเพิ่มค่า counter ซึ่งในตัวอย่างเราใช้ this ในการอ้างถึง data ตัวอย่างเช่น this.counter เราสามารถนํา methods ที่เราสร้างขึ้น ไปใส่ใน Event ได้เลย ใน Code ตัวอย่างด้านบน ผมเอาไปใส่ใน onClick ของปุ่มกด ประมาณนี้ v-on:click=“increase()” การใช้งาน และการทํางานของ Data และ Methods ก็ประมาณนี้ครับ สองตัวนี้จะใช้งานค่อนข้างบ่อยครับ ลองศึกษาและ ประยุกต์ใช้งานดูครับ ผมก็ขอจบไว้แค่นี้ครับ :)