เริ่มต้นใช้งาน Vue.js 2

ทำความรู้จักกับ Vue.js 2, Vue Instance และ วิธีการ Install

Vue.JS คืออะไร?

Vue.js เป็น Javascript library ตัวหนึ่งซึ่งมีหน้าที่จัดการ UI บนหน้า website, ตัว library มีความยืดหยุ่น สามารถใช้งานได้ตั้งแต่โปรเจคเล็กๆ ไปจนถึงโปรเจคขนาดใหญ่

รู้จักกับ Vue Instance

Vue instance เป็น object ตัวหนึ่ง ซึ่งภายในประกอบไปด้วยเครื่องมือต่างๆ ที่ใช้ในการจัดการส่วนของ html บนหน้าเว็บไซต์ เจ้า object ตัวนี้ถือได้ว่าเป็นหัวใจสำคัญที่ทุกๆ application ของ Vue จำเป็นต้องมีเสมอ

การสร้าง Vue Instance

var vm = new Vue({
  // options
})

ทำได้โดยใช้คำสั่ง new เหมือนการสร้าง object ทั่วๆไป โดยในที่นี้เป็นการสร้าง object จากคลาสชื่อ Vue (ต้อง install ก่อน) แล้วเก็บไว้ในตัวแปร vm (ย่อมาจาก View Model แต่จะตั้งชื่อว่าอะไรก็ได้)

ในส่วนของ options นั้น เป็นรายละเอียดปลีกย่อยที่บ่งบอกลักษณะเฉพาะของ Vue instance นั้นเช่น จะให้เก็บข้อมูลอะไรบ้าง หรือให้จัดการส่วนไหนในไฟล์ html ของเรา ซึ่งรายละเอียดต่างๆของ options นั้น เราจะค่อยๆ แนะนำการใช้งานในบทความต่อๆไปครับ

แต่ก่อนที่เราจะสร้าง Vue instance ขึ้นมาได้ เราจำเป็นต้อง install ตัว library ของ Vue เพื่อให้โปรแกรมรู้จัก class ชื่อว่า Vue เสียก่อน

วิธีการ install Vue.js

การ install Vue สามารถทำได้หลายวิธีดังต่อไปนี้

CDN

<!-- version ล่าสุด -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- ระบุ version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<!-- production version ไม่มี log warning -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

NPM

# stable version ล่าสุด
$ npm install vue

วิธีนี้เป็นวิธีที่แนะนำสำหรับพัฒนา application ขนาดใหญ่ เพราะสามารถทำงานร่วมกับ Webpack และใช้เขียน Vue แบบ Single File Component ได้

CLI

เป็นเครื่องมือของ Vue ที่ช่วยเรา install vue application ให้พร้อมใช้งานได้อย่างรวดเร็ว ไม่ต้องเสียเวลาตั้งค่า Webpack ให้วุ่นวาย ทำให้เป็นที่นิยมของผู้ใช้ Vue และเป็นวิธีที่แนะนำให้ใช้ทีสุด

ศึกษารายละเอียดวิธีการเพิ่มเติมได้ที่ vue-cli.

ในครั้งหน้าเราจะมาเริ่มใช้งาน Vue แบบง่ายๆกันครับ