Vue.js คือ ตอนที่ 2 : ภาพรวมการทำงาน

1. อินสแตนซ์ (Instance) Vue
2. ส่วนประกอบ (Components) ของ Vue
3. คำสั่ง (Directives)
4. Vue เราเตอร์ (Router)
5. Vuex สำหรับการจัดการของ State
6. คุณสมบัติข้อมูลเชิงโต้ตอบ (Reactive Data)
7. คุณสมบัติที่คำนวณได้ (Computed Properties) และผู้เฝ้าดู (Watchers)
8. เมธอด (Methods)
9. ตัวกรอง (Filters)
10. Vue Lifecycle Hooks
11. คำสั่ง (Directives) Vue สำหรับจัดการอินพุตของผู้ใช้ (User Input)
12. Vue มิกซ์อิน (Mixins)

หากคุณสนใจที่จะทำเว็บ Vue.js และทำแอพที่มีประสิทธิภาพ ปรับขนาดได้ และดูแลรักษาง่าย คุณต้องเข้าใจแนวคิดหลักของ Vue.js เฟรมเวิร์ก JavaScript ที่ทันสมัยนี้มีฟีเจอร์อันทรงพลังมากมายที่ออกแบบมาเพื่อให้การพัฒนาเว็บจัดการได้ง่ายและสนุกสนานยิ่งขึ้น

1. อินสแตนซ์ (Instance) Vue

ทุกแอปพลิเคชัน Vue เริ่มต้นด้วยอินสแตนซ์ (Instance) Vue อินสแตนซ์นี้ทำหน้าที่เป็นหัวใจของแอปพลิเคชันของคุณ ควบคุมทุกอย่างตั้งแต่การจัดการข้อมูลไปจนถึงการแสดงผลส่วนประกอบ เมื่อคุณสร้างอินสแตนซ์ Vue คุณจะส่งผ่านออบเจกต์ตัวเลือก ซึ่งอาจมีคุณสมบัติต่างๆ เช่น ข้อมูล เมธอด คำนวณ ดู และอื่นๆ

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  methods: {
    sayHello: function() {
      return this.message;
    }
  }
});

ในตัวอย่างนี้elระบุองค์ประกอบใน DOM ที่อินสแตนซ์ Vue จะควบคุม อ็อบเจ็กต์ data ประกอบด้วยข้อมูลที่อินสแตนซ์จะจัดการ ในขณะที่ methods มีเมธอดที่อินสแตนซ์นี้สามารถใช้ได้

2. ส่วนประกอบ (Components) ของ Vue

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

องค์ประกอบ Vue พื้นฐานอาจมีลักษณะดังนี้:

Vue.component('my-component', {
  data: function() {
    return {
      message: 'Hello, Vue.js component!'
    };
  },
  template: '<div>{{ message }}</div>'
});

my-component คือองค์ประกอบ Vue ใหม่ที่แสดงข้อความ แต่ละคอมโพเนนต์มีขอบเขตแยกต่างหาก หมายความว่ามีการเข้าถึงข้อมูลและเมธอดของตัวเองเท่านั้น

3. คำสั่ง (Directives)

Vue.js ใช้คำสั่ง (Directives)—โทเค็นพิเศษในมาร์กอัปที่ส่งสัญญาณคอมไพเลอร์ HTML ของ Vue.js เพื่อแนบลักษณะการทำงานที่ระบุกับองค์ประกอบ DOM คำสั่ง (Directives) จะนำหน้าด้วยv-เพื่อระบุว่าเป็นแอตทริบิวต์เฉพาะของ Vue คำสั่งทั่วไปบางส่วน ได้แก่v-if, v-for, v-show, v-bind, v-model, v-onและ

<div v-if="isVisible">Now you see me</div>
<div v-for="item in items">{{ item }}</div>
<div v-show="isVisible">Now you see me too</div>

ในตัวอย่างข้างต้น v-if เป็นคำสั่งแบบมีเงื่อนไขที่จะแสดงผลองค์ประกอบก็ต่อเมื่อเงื่อนไขเป็นจริงเท่านั้น v-for เป็นคำสั่งวนซ้ำที่จะแสดงรายการของรายการตามอาร์เรย์ v-show คล้ายกับ v-if แต่จะสลับ display คุณสมบัติ CSS แทนการลบองค์ประกอบออกจาก DOM

4. Vue เราเตอร์ (Router)

สำหรับการทำเว็บ Vue.js และทำแอพ ที่ต้องการหลายหน้า Vue Router เป็นคุณสมบัติที่จำเป็น เป็นไลบรารีการกำหนดเส้นทาง (Router) อย่างเป็นทางการสำหรับ Vue.js และรวมเข้ากับ Vue.js core ได้อย่างไร้รอยต่อ Vue Router แมปเส้นทางแอปพลิเคชันไปยังคอมโพเนนต์ ช่วยให้ผู้ใช้สามารถนำทางผ่านแอปพลิเคชันหน้าเดียวได้ราวกับว่าเป็นแอปพลิเคชันหลายหน้า

const router = new VueRouter({
  routes: [
    { path: '/home', component: HomeComponent },
    { path: '/about', component: AboutComponent },
  ]
});

ในตัวอย่างนี้ เราแมปเส้นทาง ‘/home’ กับ HomeComponent และเส้นทาง ‘/about’ กับ AboutComponent เมื่อผู้ใช้นำทางไปยังเส้นทางเหล่านี้ ส่วนประกอบที่เกี่ยวข้องจะแสดงผล

5. Vuex สำหรับการจัดการของ State

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

Vuex ทำงานบนหลักการของสถาปัตยกรรม Flux ซึ่งเกี่ยวข้องกับการกระทำ การกลายพันธุ์ และสถานะ การดำเนินการจะถูกส่งไปเพื่อเปลี่ยนแปลงสถานะ ในขณะที่การกลายพันธุ์จะอัปเดตสถานะเพื่อตอบสนองต่อการกระทำ สุดท้าย สถานะหมายถึงข้อมูลของแอปพลิเคชัน

นี่คือตัวอย่างร้านค้า Vuex ง่ายๆ:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

ในตัวอย่างนี้ วัตถุ state มี count คุณสมบัติ วัตถุ mutations มีเมธอด increment ที่อัพเดตจำนวน และ actions อ็อบเจ็กต์มี increment เมธอดที่ส่งการกลายพันธุ์ คอมโพเนนต์สามารถเข้าถึงสถานะของร้านค้าและกระทำการเพื่ออัพเดตสถานะ

6. คุณสมบัติข้อมูลเชิงโต้ตอบ (Reactive Data)

หนึ่งในคุณสมบัติหลักของ Vue.js คือระบบข้อมูลเชิงโต้ตอบ (reactive data) เมื่อคุณประกาศคุณสมบัติของข้อมูลในอินสแตนซ์หรือคอมโพเนนต์ของ Vue Vue.js จะติดตามการพึ่งพาระหว่างคุณสมบัติของข้อมูลและ DOM โดยอัตโนมัติ โดยจะอัปเดต DOM ทุกครั้งที่คุณสมบัติของข้อมูลเปลี่ยนแปลง

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});

ในตัวอย่างนี้messageคุณสมบัติเป็นปฏิกิริยา หากคุณเปลี่ยนค่าของmessageVue.js จะอัปเดตองค์ประกอบ DOM ใดๆ ที่ขึ้นอยู่กับค่านั้นโดยอัตโนมัติ

7. คุณสมบัติที่คำนวณได้ (Computed Properties) และผู้เฝ้าดู (Watchers)

คุณสมบัติจากการคำนวณ (Computed Properties) เป็นอีกหนึ่งคุณสมบัติที่มีประสิทธิภาพใน Vue.js ที่ให้คุณสร้างคุณสมบัติเชิงโต้ตอบโดยอิงจากคุณสมบัติข้อมูลอื่นๆ คุณสมบัติที่คำนวณจะถูกแคชไว้ ซึ่งหมายความว่าจะคำนวณใหม่เมื่อการพึ่งพาเปลี่ยนแปลงเท่านั้น ซึ่งเป็นการปรับปรุงประสิทธิภาพ

let vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum: function() {
      return this.a + this.b;
    }
  }
});

ในตัวอย่างนี้ คุณสมบัติที่ คำนวณ sum ขึ้นอยู่กับค่าของ a และ b หากมีการเปลี่ยนแปลงอย่างใดอย่างหนึ่งsumคุณสมบัติจะถูกคำนวณใหม่

ในทางกลับกัน ผู้เฝ้าดู (Watchers) เป็นวิธีที่ยืดหยุ่นกว่าในการตอบสนองต่อการเปลี่ยนแปลงข้อมูล อนุญาตให้คุณเรียกใช้ตรรกะแบบกำหนดเองเพื่อตอบสนองต่อการเปลี่ยนแปลงในคุณสมบัติของข้อมูลเฉพาะ

let vm = new Vue({
  el: '#app',
  data: {
    searchTerm: ''
  },
  watch: {
    searchTerm: function(newVal, oldVal) {
      this.search(newVal);
    }
  },
  methods: {
    search: function(query) {
      // Perform search logic here
    }
  }
});

ในตัวอย่างนี้ ผู้เฝ้าดู searchTerm คุณสมบัติเรียก search เมธอดเมื่อใดก็ตามที่ค่าของ searchTerm การเปลี่ยนแปลง

8. เมธอด (Methods)

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

let vm = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    increment: function() {
      this.counter++;
    }
  }
});

ในตัวอย่างนี้ increment เมธอดจะเพิ่ม counter คุณสมบัติทีละหนึ่งทุกครั้งที่เรียกใช้ วิธีนี้สามารถกระตุ้นได้จากการโต้ตอบของผู้ใช้ เช่น การคลิกปุ่ม

<button v-on:click="increment">Increment counter</button>

คำสั่ง นี้ v-on ใช้เพื่อฟังเหตุการณ์ DOM และจะเรียกใช้ increment เมธอดเมื่อคลิกปุ่ม

9. ตัวกรอง (Filters)

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

let vm = new Vue({
  el: '#app',
  data: {
    price: 100
  },
  filters: {
    currency: function(value) {
      return '$' + value.toFixed(2);
    }
  }
});

ในตัวอย่างนี้ currency ตัวกรองจะจัดรูปแบบ price คุณสมบัติเป็นสกุลเงิน เพิ่มเครื่องหมายดอลลาร์และระบุทศนิยมสองตำแหน่ง ตัวกรองนี้สามารถใช้ในเทมเพลตได้ดังนี้:

<div>{{ price | currency }}</div>

สัญลักษณ์ไปป์ ( |) ใช้เพื่อใช้ตัวกรองกับนิพจน์

10. Vue Lifecycle Hooks

การทำความเข้าใจวงจรชีวิตของอินสแตนซ์หรือส่วนประกอบ Vue เป็นสิ่งสำคัญ ตั้งแต่การสร้างไปจนถึงการทำลาย อินสแตนซ์ Vue จะต้องผ่านช่วงวงจรชีวิตหลายช่วง แต่ละขั้นจะทริกเกอร์วงจรชีวิต ซึ่งคุณสามารถเพิ่มโค้ดของคุณเองได้

hooks วงจรชีวิตหลักคือ:

• beforeCreate: ถูกเรียกก่อนที่จะสร้างอินสแตนซ์ ข้อมูลและเหตุการณ์ยังไม่ได้เริ่มต้น
• created: เรียกใช้หลังจากสร้างอินสแตนซ์ ข้อมูลและเหตุการณ์ได้รับการเตรียมใช้งานแล้ว แต่เทมเพลตยังไม่ได้ติดตั้งหรือแสดงผล
• beforeMount: ถูกเรียกใช้ก่อนที่จะติดตั้งเทมเพลตใน DOM
• mounted: เรียกใช้หลังจากติดตั้งเทมเพลตใน DOM นี่คือที่ที่คุณจะทำงานที่ต้องเข้าถึง DOM เช่นการใช้ปลั๊กอิน jQuery
• beforeUpdate: ถูกเรียกก่อนที่ DOM จะได้รับการอัปเดตเมื่อมีการเปลี่ยนแปลงคุณสมบัติเชิงโต้ตอบ
• updated: เรียกใช้หลังจาก DOM ได้รับการอัปเดต ระวังอย่าวนซ้ำไม่สิ้นสุดเมื่อเปลี่ยนข้อมูลใน hook นี้
• beforeDestroy: ถูกเรียกก่อนที่อินสแตนซ์จะถูกทำลาย นี่คือที่ที่คุณจะล้างข้อมูลกิจกรรมหรือการสมัครรับข้อมูลเชิงโต้ตอบ
• destroyed: ถูกเรียกหลังจากอินสแตนซ์ถูกทำลาย

ตะขอ (hooks) แต่ละอันให้โอกาสในการดำเนินการในขั้นตอนต่างๆ ของอายุขัยของอินสแตนซ์

let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  created: function() {
    console.log('created hook');
  },
  mounted: function() {
    console.log('mounted hook');
  },
});

ในตัวอย่างนี้ created ตะขอ (hooks) mounted วงจรชีวิตจะใช้เพื่อบันทึกข้อความไปยังคอนโซลในขั้นตอนที่สอดคล้องกัน

11. คำสั่ง (Directives) Vue สำหรับจัดการอินพุตของผู้ใช้ (User Input)

Vue มีคำสั่งหลายคำสั่งสำหรับจัดการอินพุตและการโต้ตอบของผู้ใช้ รวมถึง:

• v-on: แนบตัวฟังเหตุการณ์เข้ากับองค์ประกอบ ซึ่งจะทริกเกอร์เมธอดเมื่อเหตุการณ์เกิดขึ้น
• v-model: สร้างการเชื่อมโยงข้อมูลแบบสองทิศทางบนอินพุตฟอร์ม ช่องทำเครื่องหมาย และองค์ประกอบที่เลือก

<button v-on:click="increment">Increment counter</button>
<input v-model="message">

ในตัวอย่างนี้ v-on คำสั่งจะแนบตัวฟังเหตุการณ์การคลิกเข้ากับปุ่ม ซึ่งจะเรียกใช้ increment เมธอดเมื่อคลิกปุ่ม คำ v-model สั่งสร้างการผูกข้อมูลแบบสองทางในช่องป้อนข้อมูล โดยเชื่อมโยงกับ message คุณสมบัติ

12. Vue มิกซ์อิน (Mixins)

มิกซ์อินใน Vue เป็นวิธีที่ยืดหยุ่นในการแจกจ่ายฟังก์ชันที่ใช้ซ้ำได้สำหรับคอมโพเนนต์ของ Vue วัตถุผสมสามารถมีตัวเลือกส่วนประกอบใดๆ เมื่อคอมโพเนนต์ใช้มิกซ์อิน ตัวเลือกทั้งหมดในมิกซ์อินจะถูก “Mixins” เข้ากับตัวเลือกของคอมโพเนนต์เอง

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

var Component = Vue.extend({
  mixins: [myMixin]
})

ในตัวอย่างนี้ myMixin อ็อบเจ็กต์ประกอบด้วย createdlifecycle hook และ hello เมธอด เมื่อ Componentใช้ myMixin จะเรียกใช้ hello เมธอดเมื่อสร้าง

---

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

---

Vue.js คืออะไร

Vue.js คือ ตอนที่ 1 : การตั้งค่า (Setting Up) สภาพแวดล้อม (Environment) Vue.js

Vue.js คือ ตอนที่ 3 : การจัดการข้อมูล (Data Handling)