มาเล่น vue.js กันเถอะ มาเล่น vue.js กันเถอะ

ตัวนี้เป็นเพียง guild line นะครับ เพราะผมก็ยังไม่เคยทำเป็น Project เลยแต่ดูแล้วมันแจ่มแมว สุดมาก ถ้าใครเล่น Angular กับ react มาเล่นตัวนี้บอกเลยว่าจับแปป ชอบเลย

Vue.js เป็น Framework ของ Javascript ที่เมาะกับการพัฒนา web site Frontend สุดๆ วันนี้ผมจะ Guild line เท่าที่ผมได้ศึกษาไปนะ ไม่ดีหรือขาดไรแนะนำกันได้เลย

ติดตั้ง Vue กันก่อน

ผมจะสอนให้ติดตั้ง ผ่าน CND นะ ถ้าใครเคยเล่น Jquery มาน่าจะเข้าใจ ก็แค่เอา code ไปแปะใน Website แล้วก็ใช้งานได้เลยเพราะผมอยากให้ Fucus กันที่เนื้อหามากกว่าเนาะ เดียวถ้าติดตั้ง เป็น Vue cli นี้ค่อยพูดกันอีกที่ถ้าว่างๆ นะ 😀

<! — development version, includes helpful console warnings → <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

______________________________________________________

<! — production version, optimized for size and speed → 
<script src=”https://cdn.jsdelivr.net/npm/vue"></script>

การประกาศแสดงผล

ตัวประกาศผมบอกได้เลยว่า ใช้ง่ายมากเพราะเหมือนเป็นส่วนผสมอย่างลงตัวละหว่าง เขียน js คล่ายๆ React และ Render ออกแบบให้ใช้ง่ายเหมือน Angular อันนี้ตามความรู้สึกตัวเองร่วนนะ เพราะเวลาเราเอาตัวแปลมาประกาศก็แค่

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

เราจะต้องประกาศ id เพื่อที่จะประกาศชื่อไว้เพื่อเอาไปใช้ใน vuejs จากนั้นเราก็เอาตัวแปลที่เราตั้งไว้มาประกาศตรงนี้ โดยต้องครอบเครื่องหมาย {{}} ด้วย

var app = new Vue({ 
   el: ‘#app’, 
   data: { message: ‘Hello Vue!’ } 
})

เราจะ ทำการ new Vue กันก่อนจากนั้น

el ก็คือชื่อ element ที่เราต้องการใช้กับ vue นั้นเอง

data เป็นส่วนที่ไว้สำหรับประกาศตัวแปลเพื่อที่จะเอาไปใช้ใน Html

ซึ่งลองเอา code ไป run ก็น่าจะ ออกันนะ 👇

ผูกตัวแปลใน Attributes ก็ได้นะ

ตัวนี้ยังไม่น่าตื่นเต้นเท่าไหร่เพราะหลายเจ้าเค้าก็ใช้อยู่กัน แต่นี้คือแบบของ vue โดยเฉพาะ

<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>

ประกาศตัวแปล

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

จากนั้นลอง Click ขวาที่ element นั้นเดียว กด inspect แล้วดู code กัน

จะเห็นว่า span ของเราจะมี element ชื่อ title และเอา ค่าของ message นั้นมาแสดง

การทำ Event Handler

Event Handler ก็คือการจัดการ หรือ ตรวจสอบเหตุการณ์ต่างๆ อย่างผู้ที่ใช้งานหน้า website เช่น เวลา click พิมพ์ต่างๆ ให้ทำไรต่อนั้นเอง

โดยวันนี้อาจจะอธิบายไม่ละเอียดยิบนะ ก็จะเป็นวิธีใช้ละกัน

โดยการที่เราจะใช้ Event Handler ใน vue เราจะใช้คำสั่ง v-on หรือ @ หรือใครที่มาสาย Javascript มาก่อน อาจจะคุ่นๆ พวก onclick , onkeyup การใช้งานคือเหมือนกันเลย แค่เปลี่ยนคำสั่งนั้นเอง โดยการที่จะเรียกใช้เราจะต้องไปประกาศ Function โดยประกาศอยู่ใน Method

ลองเอา code ไปแปะกันดู ครับ ถ้าใครอยากศึกษา Blog นี้น่าจะตอบโจทย์​

Vue.js Event Handling มาจัดการ Event กัน

Two Way Data Binding ?

2 Way Data Binding เป็น การที่เราเปลี่ยนแปลงข้อมูลที่แสดงหน้า view แล้ว Controller เปลี่ยนแปลงไปด้วย แต่ เมื่อ Controller เปลี่ยนแปลง view ก็จะเปลี่ยนแปลงไปตามกันนั้งเอง สรุปง่ายก็คือ เมื่อตัวแปลเปลี่ยนตัวที่แสดงก็เปลี่ยนตาม และเมื่อตัวแสดงที่เปลี่ยนค่าตัวแปลก็เปลี่ยนตามกันไป นั้นเอง

มาเริ่มตัวอย่างแรกคือ Input Data Binding

การทำ Building ข้อมูลนี้ง่ายนิดเดียว เราก็จะใช้ v-model เพื่อที่จะจัดการให้ตัวแปลที่ประกาศในนี้เป็น 2 way อ่านแล้วอาจจะ งง เดียวต้องเอา code ไปลอง run กันดู

และแล้วผลที่เราจะได้

ซึ่ง v-model ก็ไม่ได้ทำงานได้แค่ใน input นะ มันยังใช้กับแบบอื่นได้ด้วยเยอะแยะมากมายที่เป็นแนว 2 way data

การแสดงผลที่เป็นรูปแบบเงื่อนไข

ตัวเงื่อนไขใน view ตัวนี้ถือว่าชอบมากเพราะมันมี else , else if มาให้ เพราะก่อนหน้านี้ผมเขียนใน angular check ng-if อย่างเดียว

สำหรับเงื่อนไขใน vue นั้นเราจะใช้ v-if , v-else-if , v-else

นอกจาก v-if แล้วเรายังสามารถใช้ v-show ได้เหมือนกัน

<h1 v-show=”true”>Hello!</h1>

v-if กับ v-show มันต่างกันยังไง v-if จะเป็นการตรวจสอบถ้า false element ก็หายไปจาก html ไปเลย แต่ v-show element ยังอยู่ใน html อยู่แต่แค่ไม่แสดงออกมาให้เห็นเท่านั้นเอง

การทำ Loop v-for

เราสามารถเอา array ของเรามาประกาศใช้ให้มันวนซำ้เองโดยไม่ต้องมานั้งพิมพ์ตัวแปลทีละตัวเพื่อมาแสดงเลย

แสดงการวนซ้ำโดยใช้ array

<ul id=”example-1"> 
   <li v-for=”(item, index) in items”>{{index}}. {{ item.message }} </li>
</ul>

และเขียนใน js

var example1 = new Vue({
   el: ‘#example-1’, 
   data: { items: [ 
      { message: ‘Foo’ }, 
      { message: ‘Bar’ } 
   ] } 
})

แสดง v-for สำหรับ Object

<ul id=”v-for-object” class=”demo”> 
   <li v-for=”(value, key) in object”> 
      {{key}} : {{ value }} 
   </li> 
</ul>

เขียน js

new Vue({ 
   el: ‘#v-for-object’, 
   data: { object: { 
      firstName: ‘John’, 
      lastName: ‘Doe’, age: 30 
   } } 
})

v-for น่าจะเป็นตัวนึงที่ใช้กันบ่อยพอสมควร เพราะถ้าใครเคย ดึงข้อมูลจาก api หรือ ทำ api มาก่อน ก็น่าจะรู้ว่าส่วนใหญ่จะส่งข้อมูลมาให้ front end เป็นรูปแบบ Array หรือ Object เพื่อที่จะทำให้เราจัดการง่ายเราก็ เขียน For ไว่เพื่อที่จะทำให้มัน Dynamic มากขึ้นนั้งเอง

มาเข้าใจเรื่อง Method Computed Watcherใน vue กัน

ตัวนี้น่าจะเป็นตัวที่น่าสนใจ และซับซนมากอีกตัวใน Vue ที่จริงตอนแรกผมว่าจะอธิบายเหมือนกันนะแต่เหมือนจะไม่ละเอียดมากกลัวไม่ค่อยเข้าใจ เลยเปิดวาร์ป ลองไปอ่านดูละเอียดยิบ

ความแตกต่างระหว่าง Method และ Computed property ใน Vue.js

การใช้ Component

Web Components คือ ชุดคำสั่ง APIs ของ web platform ที่ทำให้เราสามารถสร้างและใช้ HTML tag ที่ถูกปรับแต่งขึ้นมาในเว็บเพจและเว็บแอพของเราได้ ซึ่งตัว HTML tag ที่เราสร้างขึ้นมาใหม่นี่จะถูกเรียกว่า custom component, custom element หรือ widget ซึ่งสามารถใช้ได้กับ browser สมัยใหม่ และสามารถนำไปใช้ร่วมกับ Javascript library ตัวอื่นหรือ framework อื่นๆที่ทำงานร่วมกับ HTML ได้

Web Components มาตรฐานใหม่ของ Web

โดยเราจะสร้างไว้ใน vue.js Project เราเพื่อให้ทุกอย่างแบ่งเป็นส่วนๆ และจัดการง่ายขึ้น เราจะใช้ Vue.component เพื่อประกาศสร้าง component จากนั้นตามด้วยชื่อ Component ของเรา และ

data คือ ข้อมูลที่จะให้ประกาศตัวแปลใช้ภายใน Component

template เป็นการกำหนด html ของเราเพื่อให้เวลาเรียกใช้ Component แล้วแสดงได้เลย

Vue.component(‘button-counter’, { 
   data: function () { return { count: 0 } }, 
   template: ‘<button v-on:click=”count++”>You clicked me {{ count }} times.</button>’ 
})

สร้าง element สำหรับ Vue.js ขึ้นมาเพื่อเราจะใช้งาน vue

new Vue({ el: ‘#components-demo’ })

เอา Component ไปเรียกใช้งาน

<div id=”components-demo”> 
   <button-counter></button-counter> 
</div>

ลองเอา code ไปเล่นดูว่าได้เหมือนกันไหม

และเมื่อเราลองประกาศเรียกซ้ำๆกันดู

<div id=”components-demo”>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>

แสดงออกเหมือนกันไหม

มาใช้ Props กับ Component ของเรากัน

การ Props ก็เหมือนการเอาค่าจากข้างนอกมาเพื่อที่จะให้แสดงใน Component ของเรานั้นเอง

จะเห็นได้ว่าค่าจาก attribute ชื่อ title มันมาแสดงออกได้ไง เป็นเพราะเรานำเข้าข้อมูลผ่าน Props นั้นเอง ซึ่งไปดูใน Javascript มีชื่อ attribute title แล้วก็เอา ค่า title ของเราไปแสดง

อ่าวแล้วถ้าเกิดข้อมูลเป็น Array ละจะต้องทำไง

เราก็แค่เปลี่ยน attribute title ของเราปกติ มาใช้ v-bind:title ก็สามารถงานได้แล้ว

เราก็ยังสามารถประกาศ Component เฉพาะ Element ได้

เดียวจะอธิบาย เป็นส่วนๆ เนาะ

เราจะสร้าง template ไว้เพื่อที่เราจะสร้าง Html ที่จะเอาไปใช้กับ Component ในส่วนนี้

<template id=”foodarea”> 
   <div id=”food”> 
      <h4>เมนูอาหาร</h4> 
      <h6>อาหารชื่อดังเมืองไทย</h6> 
   </div> 
</template>

จะทำการประกาศเก็บ element ไว้ในตัวแปล food เพื่อเอาไปเป็ฯ template Component

var food = {
   template: ‘#foodarea’
}

เราจะสร้าง element เพื่อให้สามารถใช้งาน vue ได้ แล้วเรียกใช้ Component ของเราที่สร้างไว้ได้เลย

new Vue({
   el: ‘#shop’,
   components: {
      foodApp: food
   }
})

แล้วสุดท้ายละท้ายสุดก็เอาไปใช้ ใน html กันเลย

<div id=”shop”>
   <food-app></food-app>
</div>

การทำ Slot Content

ตัว Slot มาเพื่อตอบโจทย์ให้ Component มีความแตกต่างแหละหลากหลายมากขึ้นเพราะ มันสามารถทำให้เราประกาศ HTML ไปใช้รวมกับ Component ทำให้เราสามารถใช้ Component ได้อย่างมีมิติมากขึ้นนั้นเอง วิธีใช้ไม่ยากเลย

เราจะต่อยอด code จากก่อนหน้านี้เพื่อนำมาใช้ในการทำ slot เดียวผมจะอธิบายเป็นส่วนๆไป

<food-app> 
   <h2>อาหารใต้</h2> 
   <ul> 
      <li>แกงเหลือง</li> 
      <li>แกงไตปลา</li> 
   </ul> 
</food-app> 

จากตัวอยากจะขอยกตัวอย่างเป็น รายการอาหารเพื่อให้เข้าใจง่าย เราจะเอา element ที่ต้องการให้แสดง element นั้น เราจะเอา element ของ component มาครอบไว้เพื่อที่จะเอา ข้อมูลข้างในไปใช้

<template id=”foodarea”> 
   <div id=”food”> 
      <slot></slot> 
   </div> 
</template>

จากนั้นเราต้องการให้ข้อมูลนั้นไปแสดงตรงไหน เราก็นำ <slot></slot> ไปวางไว้ได้เลย

สรุป

เนื่อหาที่สอนนี้อาจจะไม่ครอบควบคุมทุกเนื้อหา แต่เป็นข้อมูลที่ควรรู้เพราะสำคัญมาก ถ้าพื้นฐานไม่แน่น ก็เปลี่ยบเหมือนรากยังไม่แข็งแรงแล้วต้องการให้ลำต้นใหญนั้นแหละ

สำหรับใครอยากศึกษาเพิ่มเติมก็ไปตาม link นี้ได้เลย

Installation - Vue.js

ถ้าเนื่อหาตกหล่นหรืออธิบายผิดไงก็แนะนำติกันได้

😬😬😬😬😬😬