Skip to main content
Library / FrameworkVue.js

Vue.js 101 ฉบับมาเร็ว ไปเร็ววว

Developer Team
BorntoDev Co., Ltd.

Vue อ่านว่า “วิว” เหมือนกับคำว่า view เลย โดยเป็น “progressive framework” สำหรับสร้าง user interface ซึ่ง progressive ก็คือการที่ Vue.js นั้นใช้เป็นเหมือนส่วนเพิ่มความสามารถที่เอาไปใช้งานกับ HTML ซึ่งชื่อ Vue นั้นก็มีที่มาจากการที่ library นี้จะโฟกัสที่การจัดการในส่วนของ view เท่านั้น เพื่อให้สามารถนำ Vue ไปใช้งานร่วมกับ Library อื่นๆได้สะดวก และยังเหมาะกับการทำ Single-Page Applications (SPA) หรือเว็บที่ไม่ต้องเปลี่ยนหน้าบ่อยๆนั่นเอง

ซึ่งข้อดีของ Vue.js คือ จะช่วยให้เราสามารถจัดการกับ element ที่นำมา render บนหน้าเว็บของเราได้ง่ายๆ เช่น 

  • โดยปกติถ้าเราใช้เพียง JavaScript เวลาต้องการจัดการกับ element ในหน้าเว็บ เราจะต้องเขียน JS ไปแก้ไข DOM โดยตรงเพื่อจัดการกับ element ตาม id หรือ class ก็ว่ากันไป 
  • แล้วถ้าต้องการแก้ไขกับ element อื่นอีก ก็ต้องเขียน JS ไปแก้ไข DOM เพิ่มอีก 1 บรรทัด
  • แต่ถ้าเราใช้ Vue เราสามารถใช้สิ่งที่เรียกว่า “component” ซึ่งช่วยให้เราจัดการกับ element ได้โดยไม่ต้องเข้าไปแก้ไข DOM โดยตรง
  • ทำให้เราจัดการกับ Element ได้ง่ายและช่วยให้อ่านโค้ดได้ง่ายขึ้น ลดขั้นตอนที่ต้องไป get element มาจาก DOM ทุกครั้งที่จะแก้ไข ด้วยการเปลี่ยนค่าใน component แทน

แค่เล่าอย่างเดียวคงไม่เห็นภาพต้องลงมือทำกันซักหน่อย

บทความนี้เป็นเพียงบทความแนะนำเครื่องมือเท่านั้น เลยจะไม่สอนติดตั้งนะ! 

Vue มี sandbox ให้เราได้ไปลองเล่นได้ ซึ่งเวลาลองเล่นถ้าเราลองเปลี่ยนโค้ดแล้วลองเซฟดู ก็จะเห็นผลที่เปลี่ยนแปลงทันที  https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-hello-world

***บทความนี้จะใช้ตัวอย่างของ https://vuejs.org/v2/guide/ มาอธิบาย

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

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

จากโค้ดจะเห็นว่าเวลาเราสร้าง element ของ HTML ขึ้นมาหนึ่งตัว เราก็จะใช้ Vue นี่แหละเป็นตัวจัดการเนื้อหาข้างในของมัน ซึ่งเราจะต้องสร้าง Vue object ขึ้นมา แล้ว property ของ object Vue จะเป็นตัวกำหนดสิ่งที่อยู่ข้างใน element นั้นๆ จากตัวอย่าง object app มี property ชื่อ el ซึ่งเป็นตัวกำหนด id ที่ object จะไปอ้างอิงถึง element นั้นๆ ต่อมาคือ data ก็ตามชื่อเลยเป็นข้อมูลของ element ซึ่งจากโค้ดจะเห็นว่า element id “app” ได้เรียก property ชื่อ message จึงนำค่า ‘Hello Vue!’ มาแสดงใน div นั่นเอง

แต่แค่นี้มันยังไม่พอ! vue นั้นมีคำสั่ง(directive)มาช่วยอำนวยความสะดวกในการเขียนให้เราด้วย ซึ่งจะต้องเรียกใช้เหมือนเป็น attribute ของ HTML element ตัวนึงเลย เช่น

v-bind

ใช้สำหรับผูกค่า attribute กับค่าของ property ใน component เช่นตัวอย่าง

<div id="app-2">
     <span v-bind:title="message">
       {{message}}
     </span>
   </div>
 
   <script>
     var app2 = new Vue({
       el: "#app-2",
       data: {
         message: "You loaded this page on " + new Date().toLocaleString()
       }
     });
   </script>

vue v-bind

จากตัวอย่างจะเป็นการ bind attribute title เข้ากับ property message ข้อความที่ออกมาจึงมี title ตามค่าของ message

v-for

ใช้สำหรับวนค่าในลิส

<div id="app-4">
     <ol>
       <li v-for="todo in todos">
         {{ todo.text }}
       </li>
     </ol>
   </div>
 
   <script>
     var app4 = new Vue({
       el: "#app-4",
       data: {
         todos: [
           { text: "Learn JavaScript" },
           { text: "Learn Vue" },
           { text: "Build something awesome" }
         ]
       }
     });
   </script>

จากตัวอย่าง เราสามารถสร้าง <li> ได้ตามจำนวนของสมาชิกใน list ของ property ชื่อ todos แล้วใช้ property ชื่อ text มาเป็นค่าภายใน <li>

v-on

ใช้สำหรับจัดการ event ที่เกิดขึ้นกับ element

<div id="app-5">
     <p>{{ message }}</p>
     <button v-on:click="reverseMessage">Reverse Message</button>
   </div>
 
   <script>
     var app5 = new Vue({
       el: "#app-5",
       data: {
         message: "Hello Vue.js!"
       },
       methods: {
         reverseMessage: function() {
           this.message = this.message
             .split("")
             .reverse()
             .join("");
         }
       }
     });
   </script>

จากตัวอย่างเมื่อเรากดปุ่มเราจะเห็นว่าข้อความมีการสลับ index ตัวอักษรจากหน้าไปหลัง การทำงานคือเมื่อเรากดปุ่มจะเป็นการเรียก method reverseMessage เพื่อทำการเปลี่ยนค่า property message และเมื่อค่าของ message เปลี่ยนแปลง ข้อความที่อ้างอิงจากค่า message จึงเปลี่ยนตามไปด้วย

จะเห็นว่า Vue.js ช่วยให้เราจัดการกับ element ต่างๆได้ง่ายขึ้นมากๆ ด้วยการใช้ component เป็นหลักทำให้เราไม่ต้องไปยุ่งกับตัว DOM เลยแม้แต่น้อย เวลาจะเปลี่ยนค่าก็แค่เปลี่ยนค่าใน component แต่ความสามารถพวกนี้น่ะเป็นแค่น้ำจิ้มของ Vue เท่านั้นนะ นอกจากคำสั่งที่ยกตัวอย่างมาก็ยังมีคำสั่งอื่นๆอีกถ้าใครสนใจก็สามารถลองหาข้อมูลกับเว็บหลักได้เลย  https://vuejs.org/v2/guide/

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Developer

Author Developer

More posts by Developer

Leave a Reply

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า