Skip to main content

แนะนำ Data binding

Document ต้นฉบับ: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

รู้จักกับ Reactive ก่อนว่าคืออะไร ?​

Vue นั้นมีการเพิ่มความสามารถอย่างหนึ่งมาใน Framework (และเอาจริงๆ React, Angular, Svelte) คือการสามารถ track change ของ state และ สามารถ update DOM เมื่อมี change เกิดขึ้นได้แบบ automatically โดยที่เราไม่ต้องคอยใช้คำสั่งอย่าง .innerHTML หรือคอย update ตัวแปรกลับได้

ซึ่งคุณสมบัตินี้เราเรียกกันว่า Reactive คือความสามารถในการจัดการกับ view ใน DOM ได้อย่างอัตโนมัติ ซึ่งนี้เป็นข้อดีอย่างมากในการพัฒนา Frontend มันจะช่วยประหยัดทั้งคำสั่งของ javascript และอำนวยความสะดวกในการจัดการ state ของ javascript ด้วย

รู้จักกับ Ref​

ท่าแรกสำหรับทำ reactive ของ Composition API คือ ref()

  • ref() คือคำสั่งที่เปลี่ยนตัวแปรที่รับให้กลายเป็นตัวแปรแบบ reactive
  • argument ที่ใส่ใน ref() คือค่าเริ่มต้นของตัวแปร และ .value คือวิธีดึงค่าและ update กลับไปผ่านตัวแปร reactive ได้
<script setup>
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

Ref สามารถใช้ได้หมดทั้งเคส int, string

<script setup>
import { ref } from 'vue'
...
const message = ref('Hello world')
...
</script>

<template>
  {{ message }}
  <button @click="increment">
    {{ count }}
  </button>
</template>

รู้จักกับ Reactive​

ใช้กับเคสที่เป็น object สามารถแปลง object ออกมาได้เลย (ถ้าใช้ ref() มันจะต้อง .value เสมอ แต่ถ้าใช้ reactive() จะดึง object ออกมาได้เลย

ตัวอย่าง

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

const increment = () => {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

รู้จักกับ v-model​

เอกสารต้นฉบับ https://vuejs.org/guide/components/v-model.html

สิ่งที่เราทำกันด้านบนเป็น 1 way binding คือ เรา update อะไร เราต้องคอยบอก update ให้กับตัวแปรนั้นด้วย

Vue ได้เตรียม attribute v-model ที่สามารถผูก value ของตัวแปร Reactive เข้ากับ value ของ input ออกมาได้

เช่น เราจะลองสร้างกล่อง search ขึ้นมา โดย

  • ใช้ตัวแปรชื่อ searchText ทำการผูก 2 way binding กับ form input ที่ใช้กรอก
  • ทดสอบโดยการให้พ่น searchText ออกมา
<script setup>
import { ref } from 'vue'

const searchText = ref('')

</script>

<template>
  <div>{{ searchText }}</div>
  <input v-model="searchText" />
</template>

ผลลัพธ์ของ code นี้

data-binding-01

Attribute Bindings​

คือการนำตัวแปรจากฝั่ง javascript (ไม่ว่าจำเป็น Reactive หรือไม่ Reactive) ส่งค่าเข้าไปใน attribute เพื่อใช้ผ่านตัวแปรแทน

ถ้าเป็นท่า javascript ทั่วไป เราจะใช้

<body>
  <a id="link">เปลี่ยน link</a>
  <script>
    const aDOM = document.getElementById('link')
    document.setAttribute('href', 'https://google.com')
  </script>
</body>

ถ้าเป็นท่า Vue

  • ใช้ท่า v-bind:<attribute> หรือเขียนสั้นๆเป็น :<attribute> เพื่อทำการส่ง data เข้า attribute ไป
<script setup>
  import { ref } from 'vue'
  const currentLink = ref('https://google.com')

  const changeLink = () => {
    currentLink.value = 'https://youtube.com'
  }
</script>
<template>
  <div>
    <a :href="currentLink" target="_blank">กดเพื่อไปยัง {{ currentLink }}</a>
    <button @click="changeLink()">กดเปลียน link</button>
  </div>
</template>
  • สังเกตุว่าไม่ต้อง set attribute ก็สามารถเปลี่ยน link ได้เลย