เรียนรู้ Vue.js part 1: Get Started

3 min readJul 21, 2020

ผมเป็นคนหนึ่งที่เลือกใช้ Angular เป็น front end framework มาเนิ่นนาน บัดนี้หูเบาเชื่อเขาว่าเรามา Vue.js กันเถอะ และ part นี้ไม่มีอะไรมาก แค่อยากมาเตะตับรุ่นพี่

เป็นน้องใหม่อย่ามาเวอร์วังอลังการ Angular น่ะเขามาก่อนกระทั่งตอนนี้เวอร์ชันจะ 11 แล้ว เธอน่ะเพิ่งเข้าวงการควรให้ความเคราพรุ่นพี่สมน้ำสมเนื้อกว่านี้นะ

Vue.js เรียกตนเองว่า The Progressive JavaScript Framework หรือกรอบระเบียบที่ก้าวหน้าอย่างนั้นเหรอ? ชิ มันจะเกินหน้าพี่ Angular ไปได้อย่างไร

Get Started

Vue.js หรือ Vue จะออกเสียงคล้ายกับคำว่า view ก็ได้ เน้นหนักว่าตนถูกสร้างมาเพื่อเป็นส่วนติดต่อผู้ใช้ (user interfaces) หัวใจจึง view layer only ทั้งนี้ Vue ยังอวดอ้างสรรพคุณสามารถเขียน Single-Page Applications ได้สบายๆเพียงเขียนคู่กับไลบรารีที่รองรับซึ่งเข้าใจในตัวนาง

มีผู้เปรียบว่า Angular เป็นดั่งบ้าน React ดั่งห้องครัวและนาง Vue คือเครื่องไมโครเวฟ ??? งงไปสามวัน บ้าน ห้องคร้วและไมโครเวฟเกี่ยวอะไรกับการเขียนโปรแกรม เดี๋ยวคงได้รู้กัน

เราขอสมมติเอาเองว่าท่านผู้อ่านนั้นมีประสบการณ์กับภาษา HTML, CSS และจาวาสคริปต์มาบ้างแล้ว อย่างนั้นมาเริ่มกันเลยจ้า

เครื่องมือ (tools)

VS Code

สร้าง folder ใหม่ชื่ออะไรก็ได้ เอาที่ชอบ เราขอใช้ชื่อว่า hello

จากนั้นสร้างไฟล์แรกไว้ภายใน ชื่อไฟล์ว่า index.html

สองแท็กสำคัญมาครับ head กับ body แบบนี้เลย

<head></head><body></body>

จากนั้นยัด
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
หรือ
<script src=”https://cdn.jsdelivr.net/npm/vue"></script>
ไว้ในส่วน head ได้เลย

<head>
<script src=”https://cdn.jsdelivr.net/npm/vue"></script>
</head>

ถัดมาใครที่เรียน HTML มาแล้วจะต้องรู้จัก Document Object Model (DOM) เวลาที่ browser จะวาดรูปมันจะวาดจาก DOM นี่แหละ

เอาล่ะงั้นสั่งวาด DOM ด้วย HTML แบบนี้

<body>
  <div id="app">
    {{ message }}
  </div>
</body>

ตัว message จะเป็นตัวแปรที่ถูกเชื่อมระหว่างโค้ดฝั่ง HTML (ฝั่ง view) กับฝั่งจาวาสคริปต์ (ฝั่ง model)

ถัดมาเราจะควบคุมตัวแปร message ด้วยภาษาจาวาสคริปต์ ดังนั้นเปิดแท็ก script

<body>
...
<script></script>
</body>

แล้วจัดโค้ดต่อไปนี้ลงไประหว่างแท็ก script ดังกล่าว

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

มันไม่มีอะไรมาก el ย่อมาจาก element ตัว # คือ id ชี้ไปที่ app ซึ่งอยู่ในแท็ก div ข้างต้น จากนั้นตามหาตัวแปร message แล้วนำมาผูกกับตัวแปรชื่อเดียวกันนี้ในออบเจ็กต์ data ผูกเสร็จก็ render ค่า ‘Hello Vue!’ ลงไป

เปิดไฟล์นี้ด้วย browser (แนะนำ Google Chrome)

ผลลัพธ์

ความทะเล้นของนาง Vue ไม่ได้มีเท่าที่เห็น เพราะนางได้ทำ reactive เสร็จสิ้นแล้ว

คือยังไง?
ก็คือได้เชื่อมออบเจ็กต์ data กับ DOM เป็นที่เรียบร้อยไงล่ะ

พิสูจน์ได้ไหม?
ได้สิจ๊ะ ที่ browser คลิกขวาเลือก Inspect จากนั้นเลือกแท็บ Console พิพม์ id ตามด้วย . ตามด้วยชื่อตัวแปร แบบนี้ app.message

ลองแก้ไขแล้วจะเห็นฤทธาแห่ง reactive

นางมีความพร้อมปฏิบัติกิจได้ตลอดเวลาสมกับที่ว่า เน้นหนักเพื่อส่วนติดต่อผู้ใช้ (ซึ่งตอนนี้ได้ลืมไปแล้วว่า Angular กับ React รุ่นพี่คืออะไรกันแน่นะ!?)

จากตัวอย่างข้างต้นโปรดสังเกตนะครับ Vue นั้นมอง HTML เป็นแค่จุดเริ่มต้น (entry point) เมื่อมันสามารถจับคู่ data กับ DOM ได้เมื่อไร (el: ‘#app’) มันก็ควบคุมจุดนั้นๆได้ทั้งหมด อาการเหมือน jQuery เมื่อจับคู่ selector ได้แล้วอยากทำอะไรก็ทำได้ แต่ Vue มันมีความเป็นระเบียบเรียบร้อยมากกว่า ขอให้ชมอีกตัวอย่างต่อไปนี้

ที่ HTML เพิ่มแท็ก div ใส่ id ไปว่า app-2

<div id="app-2">
  <span v-bind:title="message">Hover your mouse over me for a few seconds to see my dynamically bound title!</span>
</div>

ของใหม่คือ v-bind:title="message"

ตอนนี้เพื่อนๆต้องทราบก่อนวา title เป็นแค่ attribute ธรรมดาของแท็ก HTML ใดๆอยู่แล้ว จะแสดงอำนาจก็ต่อเมื่อเอาเมาส์ไป over หรือวางเหนือมัน ซึ่งขณะนี้มันถูกเขียนให้ผูกกับตัวแปร message จุดนี้นี่แหละที่เรากำลังจะเล่น

จับคู่ app-2 กับ Vue instance

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

เท่ากับว่าได้ผูก message ของ v-bind:title="message" เข้ากับ data.message เป็นที่เรียบร้อย โว๊ะ!สามารถถึงเพียงนี้เทียวหรือ นี่มันระดับ attribute เลยนะครัชชช

แน่นอน v-bind นี้เป็น directive ชาวคณะ Angular ก็คุ้นเคยกับคำนี้ดี นาง Vue ใส่ v- มาเป็น prefix เพื่อบ่งบอกยี่ห้อนางนั่นแหละ การผูกหรือ binding ที่เกิดขึ้นส่งผลให้ตอนนี้เมื่อเราเอาเมาส์ไปวางไว้เหนือข้อความ Hover your mouse over me for a few seconds to see my dynamically bound title! ก็จะเห็นข้อความ You loaded this page on ตามด้วยวันเวลาปัจจุบัน งดงามเหลือคณานับ

แสดงว่าแก้ไขได้ล่ะสิ ลองเลย app2.message เช่น

โค้ดทั้งหมด

สรุป

เล่ามากยาวยืดเดี๋ยวเบื่อ อ่านแบบจบเป็นตอนๆไปมันส์กว่าเยอะ

เดิม Vue ประกาศตัวออกมาเป็นเพียงไลบรารีทางเลือก ทว่าปัจจุบันนี้มันกลับเป็น framework ที่น่าศึกษาและใช้งานมาก
เดิม Vue ประกาศตัวออกมามันต้องใช้พลังมากเพื่อแย่งความสนใจของ front end developers ทว่าปัจจุบันนี้เหล่า developers ต่างเป็นฝ่ายต้องการมัน
ความคิดในการจัดการความซับซ้อนบนหน้า UI ส่งผลให้การจัดการจุดต่อจุดของ Vue นั้นเข้าตา อีกหน่อยเพื่อนๆจะได้รู้จักคำว่า MVVM
ไม่มีสิ่งใดในโลกคงกระพัน Vue คือสิ่งที่อยู่ตรงข้ามและพร้อมจะริเริ่มความคิดใหม่ๆอยู่เสมอ คุณไม่จำเป็นต้องการบ้านทั้งหลังหรือสร้างห้องครัวเพื่ออุ่นอาหาร คุณต้องการแค่ไมโครเวฟเครื่องหนึ่งเท่านั้นจริงไหม?

อ่านต่อ

เรียนรู้ Vue.js part 2: Conditionals, Loops, Handling Input and Components

สืบเนื่องจาก part 1 นั้นขายดี ขนาดหนังยังมีภาคต่อดังนั้นนี่จึงเป็น part 2 ที่นำ Vue user guide…

medium.com

อ้างอิง

ตัวอย่างทั้งหมดลอกจาก https://vuejs.org/v2/guide/