Vue.js: Data และ Methods

ในบทเรียนรู้นี้เรามาเรียนรู้ data หรือ ข้อมูล และ methods หรือ กระบวนการ โดยมี code ดังต่อไปนี้

data จะอยู่ภายใน tag data:{} เช่น

 data: {
      text: 'มันยอดเยี่ยมเลยใช่ไหม',
      universities: [
        { id: 1, name: 'มหาวิทยาลัยอุบลราชธานี' },
        { id: 2, name: 'มหาวิทยาลัยขอนแก่น' },
        { id: 3, name: 'มหาวิทยาลัยมหาสารคาม' }
      ]
    }

และ methods จะอยู่ภายใน tag medods: {} เช่น

methods: {
    say: function(msg){
      return msg + this.text;
    }
  }

ซึ่งใน method เราสามารถส่งค่าเข้าไปประมวลผลได้ตามโปรแกรมที่เราเขียนไว้ แล้วเราอาจเขียนเพื่อให้ return ค่าบางอย่างกลับหลังการประมวลผล

นอกจากนั้นเรายังสามารถ access data ได้จากการเรียก this อีกด้วย

See the Pen Vue09 by Manop Kongoon (@kongoon) on CodePen.