Note : บันทึก Workshop สร้าง Website ด้วย Node.js + Vue.js #Part 2
Step 4 — Introduce Node.js
Node.js และ Npm เบื้องต้น
การใช้งาน npm
> npm init
# จะทำการสร้างไฟล์ package.json โดยจะมีคำถามให้ตอบ> npm init -y
# จะสร้างไฟล์ให้เลยไม่ถามคำถาม
ลงมือทำ โดยจะเริ่มต้นที่ โฟลเดอร์ที่สร้างไว้ตั้งแต่ตอนแรก พิมพ์คำสั่ง ที่ terminal
> npm init -yจะเห็นว่า npm จะสร้างไฟล์ชื่อ package.json และมีโค๊ดมาให้เรียบร้อยตามภาพ
ต่อไปจะมาติดตั้ง package ที่มีชื่อว่า express โดยพิมพ์คำสั่งที่ terminal
> npm install expressจะได้โฟลเดอร์ชื่อ node_modules และ ไฟล์ package-lock.json
โดยในโฟลเดอร์ node_modules จะมีการติดตั้ง package ที่ express จำเป็นต้องใช้มาเยอะเลย
หลังจากติดตั้ง package express แล้วให้ไปดูที่ ไฟล์ package.json จะเห็นว่ามีการเพิ่มชื่อ package express ที่เราติดตั้งไปในส่วนของ dependencies
แถม : จากการติดตั้งจะพบว่า ไฟล์มีการถูกเพิ่มมาถึง 338 ไฟล์อยู่ในโฟลเดอร์ node_modules สังเกตได้จาก icons git
ซึ่งถ้าเราต้องการอัพโค๊ดขึ้น Server Github เราไม่ต้องการ ไฟล์ทั้งหมดในโฟลเดอร์ node_modules เพราะมาเยอะเกินไปและมาสามารถลงใหม่ได้ถ้าเรามี ไฟล์ package.json
ให้สร้างไฟล์ใหม่ขึ้นมาชื่อ .gitignore และพิมพ์ชื่อ โฟลเดอร์และไฟล์ที่เราไม่ต้องการให้บันทึกลง git เข้าไป
node_modules/
package-lock.jsonnode_modules/ คือ เราไม่เอาของที่อยู่ใน โฟลเดอร์ node_modules
package-lock.json เราก็ไม่เอา จะเห็นว่าจำนวนที่ขึ้น 338 ได้ลดลง เหลือ 2 ซึ่งก็คือไฟล์ package.json และ .gitignore ที่เพิ่มไปใหม่นั่นเอง
ให้เราบันทึก การแก้ไขโดยทำตามสเต็ปเดิมคือไปที่ git icons เปลี่ยน STAGES ไฟล์ที่เราเพิ่มมาใหม่ ใส่ comment และกด commit
หลังจากทำการ commit แล้วในส่วนของ git ก็จะไม่มีอะไรค้างแต่ สังเกตที่ด้านล่างของ VS Code จะมีหมายเลข 1 ค้างอยู่ซึ่งก็คือ commit ที่เรายังไม่ได้ส่งไปที่ Server ให้เราไปกดปุ่ม Sync
ซึ่งเมื่อ Sync เรียบร้อยแล้วหมายเลขก็จะหายไป
พอไปดูที่ Repository ในตอนแรกก็จะพบว่าไฟล์ถูกอัพเดตมาเรียบร้อยแล้ว
ตัดจบ nodejs และการใช้งาน npm เบื้องต้น
Step 5 — Introduce Vue.js + Nuxt.js
Vue.js (วิว) เป็น Progressive JavaScript Framework ที่ถูกออกแบบมาจัดการในด้าน UI โดยจะเน้นไปที่ View layer จะการด้านแสดงผลและตอบสนองกับผู้ใช้งาน สามารถเริ่มต้นใช้งานได้ง่าย
Vue.js ถูกสร้างขึ้นโดย ชาวจีนชื่อ Evan You ซึ่งเป็นอดีตพนักงาน Google โดย Document นั้นขึ้นชื่อในเรียกอ่านง่ายสบายตา clean สุดๆ
Vue.js สามารถนำมาใช้ในบางส่วนของ website หรือใช้กับทั้ง website ในรูปแบบ Single Page Application โดยการเริ่มต้นง่ายๆ ในการใช้ Vue.js สามารถเริ่มที่ Nuxt.js
มาต่อที่ Nuxt.js ซึ่ง ผู้สร้างบอกว่ามันเป็น Universal Vue.js Applications หรือ Vue.js Application แบบครอบจักรวาล …
- ช่วยให้เริ่มต้นใช้งาน Vue.js ได้อย่างสะดวก
- รองรับทั้ง SPA (Single Page Application) และ SSR (Server Side Rendering)
- สร้าง Route ให้อัตโนมัติ
SPA (Single Page Application) คือ web application ที่จะโหลด html มาเพียงไฟล์เดียวในตอนเริ่มต้น ส่วนการทำงานตอบสนองกับผู้ใช้ หรือการเปลี่ยนหน้าจะทำงานผ่าน JavaScript Ajax ทำให้ไม่เกิดการ Refresh หน้าเว็บ
ข้อดี คือทำให้เกิดความลื่นไหลในการใช้งาน
ข้อเสีย จะมีปัญหากับเว็บที่ต้องการ SEO เนื่องจาก Search Engine (บางเจ้า) จะไม่สามารถอ่านสิ่งที่ถูก render ผ่าน ajax ได้
หากต้องการเรื่อง SEO (Search Engine Optimization) ก็ต้องหันมาใช้ SSR
SSR(Server Side Rendering) คือ เว็บที่ถูก Render เป็น html จาก server มาเลยโดยหากมีการ Request ไปที่ Server ก็จะส่งมาเป็นก้อน html ทำให้มีประโยชน์ในด้าน SEO อย่างมาก
จบการแนะนำคร่าวๆ มาลงมือทำเลยดีกว่า….
ก่อนอื่นต้องติดตั้ง vue-cli ซึ่งเป็นตัวจัดการสร้างโครงสร้าง Project ด้วย vue.js แบบง่ายๆ
ให้เปิด terminal ขึ้นมาแล้วพิมพ์
> npm install -g vue-cli
# คือการติดตั้ง package แบบ global ทำให้สามารถใช้คำสั่งที่ path ไหนก็ได้จะได้ vue-cli พร้อมใช้งาน โดยที่ใช้จะเป็น version : vue-cli@2.9.6 ซึ่งตอนนี้มี version: @vue/cli ซึ่งเป็น version 3 beta ที่ออกมาใหม่ แต่ยังไม่ค่อยเสถียรเท่าไหร
ต่อมาเราจะมาสร้าง Project Nuxt.js ด้วย vue-cli กัน ตามที่หน้าเว็บ https://nuxtjs.org/guide/installation ให้ติดตั้งโดยพิมพ์คำสั่งที่ terminal
> vue init nuxt-community/starter-template <project-name># ใช้คำสั่ง vue init สร้าง Project Nuxt.js ด้วย Template nuxt-community/starter-template ตามด้วยชื่อ project ของเรา
หลังจากพิมพ์คำสั่งด้านบน จะมีการถามคำถาม 3 คำถาม
- Project name (ชื่อโปรเจค)
- Project description (รายละเอียดโปรเจค)
- Author (ชื่อผู้สร้าง)
จากนั้นให้ทำตามสเต๊ปที่ To get started
หลังจากรอ install ที่ค่อนข้างนานเรียบร้อยแล้วให้ลองรันด้วย
> npm run dev
หาก run สำเร็จจะแสดง path > http://localhost:3000 ให้ไปเข้า Browser ตาม path ก็จะได้หน้า Web แล้ว 🎉🎉🎉🎉
ต่อมาผมจะเปิดโฟลเดอร์ของ code ที่เราสร้างด้วย VS Code
ไปที่โฟลเดอร์คลิกขวาเปิดด้วย VS Code จะเห็นมีโครงสร้าง Project เตรียมมาให้เยอะแยะเต็มไปหมด
โดยในส่วนของหน้าเว็บจะถูกเก็บที่โฟลเดอร์ pages จะมีไฟล์ index.vue นั่นคือหน้าเว็บที่แสดงในตอนเริ่มต้นนั่นเอง
ให้ไปที่ Terminal ในตอนแรกที่เราเปิด run ไว้แล้วกด ctrl+c และจะมีคำถามมาถามให้ตอบ Y เพื่อหยุดการทำงานโดยจะมาใช้ Terminal ใน VS Code แทน
เปิด Terminal ใน VS Code สั่ง npm run dev
เปิด Browser มาก็จะได้หน้าเดิมครับ
ที่นี้เราลองมาแก้ไขตามภาพด้านล่างและ กด ctrl+s เพื่อเซฟ จะพบว่ามีการ compiled ใหม่และ Reload ให้อัตโนมัติ ความสามารถนี้เรียกว่า Hot Reloading
ไปต่อกันที่โฟลเดอร์ pages ให้สร้างไฟล์ about.vue และใส่ code
<template>
<div class="con-center">
<h1>About</h1>
</div>
</template><style>
.con-center {
text-align: center;
margin-top: 1rem;
}
</style>
ตามภาพแล้วกดเซฟ จากนั้นให้ไปที่ Browser ใส่ path url http://locahost:3000/about จะเห็นว่าหน้าเว็บแสดง About ตามที่เราได้ใส่ไปนั่นเอง
โดย Nuxt.js จะสร้าง Routing Path ให้อัตโนมัติตามโครงสร้าง ไฟล์หรือโฟลเดอร์ ในโฟลเดอร์ pages เช่น
/ => pages/index.vue
/about => pages/about.vue
/student => pages/student.vue
/student/list => pages/student/list.vueโดยหากต้องการ Routing แบบ Dynamic คือเปลี่ยนไปตามค่าที่ส่งมาจาก url จะต้องตั้งชื่อไฟล์หรือโฟลเดอร์ขึ้นต้นด้วย _ (underscore) เช่น
/student/41221321 => pages/student/_code.vue
/student/41221321/view => pages/student/_code/view.vueจบเบื้องต้นการใช้ Nuxt.js เพื่อปูทางไป Framework Vue.js
โครงสร้างของไฟล์ .vue
รูปแบบการใช้งาน vue.js แบบไฟล์นามสกุล .vue ซึ่งจะเรียกว่า Vue Single File Component หรือ Component โดยรูปแบบเต็มจะแบ่งเป็น 3 section
<template>
<div>
...
</div>
</template><script>
...
</script><style scoped>
...
</style>
- <template></template> คือส่วนที่ใช้เขียน html ไว้สำหรับแสดงผล layout หน้าเว็บไซต์จะเป็นต้องมีการครอบด้วย tag <div> อีกทีนึงหรือใช้ <section> ก็ได้ด้านในจะเป็น tag html ธรรมดาหรือ tag พิเศษของ vue
- <script></script> คือส่วนที่ใช้เขียนพวก JavaScript เพื่อคบวคุมการแสดงผล
- <style></style> คือส่วนที่ใช้เขียน class ที่ใช้จัดการตกแต่งการแสดงผล ให้สวยงาม scoped คือจำกัดให้ class ใช้ได้ในไฟล์นี้เท่านั้น หากไม่ใส่ scoped จะกลายเป็น class global
การใช้งาน Vue.js และ Nuxt.js เบื้องต้น
- Data Binding (One way binding)
ลงมือเขียนต่อกันเลย ไปที่ VS Code โดยผมจะสร้างโฟลเดอร์ที่ชื่อว่า vue-ability
และสร้างไฟล์ชื่อ 01-data-binding.vue และพิมพ์โค๊ดลงไปตามภาพด้านล่าง จากนั้นเข้า Browser ไปที่ url
localhost:3000/vue-ability/01-data-binding
จะได้หน้าเว็บดังภาพ
โค๊ดในไฟล์ 01-data-binding.vue
<template>
<div class="con-center">
<h1>Hello {{ name }}</h1>
<input type="text" :value="name"/>
</div>
</template><script>
export default {
data() {
return {
name: "Artdvp"
}
}
}
</script><style>
.con-center {
text-align: center;
margin-top: 1rem;
}
</style>
ส่วนที่ 1
template ที่อยู่ในนี้จะเป็นประเภท html tag และ Syntax ของ vue โดยจะใช้ {{ }} แรกว่า mustache syntax ครอบตัวแปรของ vue ซึ่งต้วแปรจะอยู่ใน tag script หรือใส่เป็นสูตรก็ได้ {{ 1+ 2 }}
จากโค๊ดที่ <input> tag จะมี properties :value ซึ่งมันก็คือ syntax พิเศษที่ใช้บอก vue ว่าเป็นการผูกค่า (Binding) กับตัวแปร name นั่นเอง
ซึ่งรูปแบบเต็มคือ v-bind:value=”name”
ส่วนที่ 2
เป็นส่วนของ javascript โดยที่อยู่ใน export default จะเป็น javascript ที่มีการแบ่งหน้าที่หลายแบบซึ่งกล่าวในตัวอย่างถัดๆไป
ในส่วนของ data() ก็คือข้อมูลหรือตัวแปรที่จะนำไปใช้อ้างอิงใน html template นั่นเอง
data(){ … } เป็นการเขียนแบบย่อใน JavaScript ES6 โดยมีรูปแบบดังเดิมคือ
data: function(){
...
}ส่วนที่ 3
style ผมใส่ class เพื่อให้การแสดงผลอยู่ตรงกลาง
การเขียน One way Data Binding จะผูกค่ากับตัวแปรใน vue แบบทางเดียวเมื่อเราแก้ไขค่าใน textbox ค่า name จะไม่มีการเปลี่ยนแปลง
ต่อมาลองมาเปลี่ยนค่าตัวแปร name ดูด้วย arrow function setInterval
โดยจะเพิ่ม * ต่อท้ายชื่อทุกๆ 3 วินาที จะสังเกตเห็นว่าที่หน้าจอมีการเปลี่ยนแปลงในทันที ซึ่งเป็นความสามารถ one way data-binding การผูกค่าตัวแปรแบบทางเดียว
คำถาม : ทำไมต้องใช้ arrow function ในการเปลี่ยนค่าใช้ function ธรรมดาไม่ได้เหรอ
เสริมเรื่องของ Function ใน JavaScript คราวนี้จะกลับไปที่ Folder demo-app และสร้างไฟล์ ex03-arrow.js
ใน JavaScript โดยปกติแล้วการประกาศ Function สามารถประกาศเป็น
function name(){
// some thing
}
ส่วนการเรียกใช้ Function สามารถเรียกใช้ด้านบนก่อนการประกาศได้ คุณสมบัตินี้เรียกว่า Hoisting ซึ่งตัว JavaScript Runtime จะย้าย Function ไปอยู่บนสุดให้อัตโนมัติ ทำให้สามารถใช้งาน Function ในรูปแบบนี้ได้
คราวนี้ลองประกาศ test เป็น new Object function โดย
var x = new test()และเพิ่ม Properties ไปที่ Object function แล้วลองแสดงค่าด้วย console.log จะเห็นว่า ตัวแปรด้านใน Object ที่นำหน้าด้วย this จะสามารถมองเห็นได้ เพราะ this มันคือตัวแทนของ test()
ดังนั้นเมื่ออ้างอิงด้วย x.name จึงสามารถเรียกดูค่า name ภายใน Object test() ได้นั่นเอง
โดยทีนี้เราจะมาลอง เปลี่ยนค่า this.name ใน test() ดูโดยจะทำการเพิ่ม * ให้ต่อท้ายค่า name ใน test() ทุกๆ 1 วินาที โดยใช้ setInterval และ จะแสดงค่า name ทุกๆ 3 วินาที ลองเขียนเปลี่ยนค่าแบบปกติและแสดงผลตามภาพ
แต่ค่าที่ได้ไม่ถูกเปลี่ยนแปลง เกิดจากอะไร ?
คำตอบคือ : this ด้านใน setInterval กับ this ข้างนอกเป็นคนล่ะตัวกันทำให้การอ้างอิงไม่ถูกต้อง
เพราะ this ด้านใน setInterval scope จะอยู่ใน function setInterval
ส่วน this ด้านนอก scope จะอยู่ใน test() นั่นเอง
ทางแก้แบบที่ 1 : ให้ประกาศตัวแปรใหม่ให้ชื่ออะไรก็ได้ในที่นี้ใช้ชื่อ me โดยให้ var me = this และเรียกใช้ชื่อ me แทน this แล้วลอง run ดูจะเห็นว่าผลลัพธ์ออกมา ถูกต้อง
ทางแก้แบบที่ 2 : ใช้ this แบบเดิมในแต่ให้ bind(this) ไปด้วยนั่นคือทำการบอกว่า this ด้านใน function เป็น this ของตัวข้างนอกนะ
ทางแก้แบบที่ 3 : เปลี่ยนไปใช้ arrow function แทน เพราะ arrow function จะไม่มี this ข้างในตัวมันเอง ผลลัพธ์ก็ออกมาเหมือนกัน
จบเรื่องทำไมต้องใช้ arrow function … กลับไปต่อที่ความสามารถของ Vue.js
2. v-model (Two way data binding)
โดยผมจะแก้โค๊ดในไฟล์ 01-data-binding.vue นิดหน่อย และสร้างไฟล์ใหม่ขึ้นมาในโฟลเดอร์ vue-ability ชื่อว่า 02-v-model.vue
จากนั้น copy code ในไฟล์ 01-data-binding.vue ไปวางที่ไฟล์ 02-v-model.vue และทำการแก้ไขโค๊ดโดยเพิ่ม ส่วนของ v-model ลงไป
<input type="text" v-model="name"/>แล้วก็ comment setInterval ออกไป จากนั้น save และดูผลลัพธ์จะได้ textbox สองอันมีค่า Artdvp เหมือนกันเลย
ลองแก้ไขค่าที่ textbox ที่ 1 จะพบว่าไม่มีการเปลี่ยนแปลงใดๆ
ลองแก้ไขค่าที่ textbox ที่ 2 จะพบว่าค่าถูกเปลี่ยนแปลงไปด้วยเนื่องจาก v-model จะไปเปลี่ยนแปลงค่า name ที่อยู่ใน data()
v-model สามารถใช้กับ html input พวกใช้ใน form เช่น input text, textarea, checkbox, radio button, select option … ดูตัวอย่างได้ที่ Document
3. computed
มาลองใช้งาน computed โดยสร้างไฟล์ใหม่ขึ้นมาในโฟลเดอร์ vue-ability ชื่อไฟล์ว่า 03-computed.vue และเพิ่มโค๊ดในส่วนของ computed
computed: {
upperName() {
return this.name.toUpperCase()
}
}โดยสร้าง function upperName ที่ทำให้ชื่อตัวกลายเป็นตัวพิมพ์ใหญ่ แล้วเรียกใช้ที่ส่วน template
<h2> UP NAME - {{ upperName }} </h2>ตามภาพด้านล่าง
จะเห็นได้ว่า computed นั้นจะไม่มีการรับ parameter และเรียกใช้งานใน {{ … }}ได้เหมือนกับข้อมูลใน data()
รายละเอียดเพิ่มเติม
4. methods
ต่อมาผมจะทำการสร้างไฟล์ใหม่ชื่อ 04-methods.vue ในโฟลเดอร์ vue-ability โดยไป copy code เดิมจากไฟล์ 03-computed.vue มาวางและแก้ไข code เพิ่มเติมลงไป
โดยเพิ่ม tag button และใส่ @click เรียกใช้งาน methods doSave ที่เพิ่มเข้าไปด้านล่าง computed
การใช้งาน methods นั้นจะเรียกใช้ผ่าน event ต่างๆที่เกิดขึ้น เช่น click, mousemove, keyup, keydown ซึ่งรูปแบบเดิมจะเป็น v-on:event เขียนย่อได้เป็น @event โดย function ใน methods สามารถรับ parameter ได้ด้วย
จากนั้นลองทดสอบดูผลลัพธ์ โดยให้เปิด google chrome inspect กด F12 จะแสดงเครื่องมือช่วยในการพัฒนาเว็บ ให้เลือกไปที่ console
จากนั้นลองแก้ไขค่าที่ textbox และกดปุ่ม save เพื่อดูผลลัพธ์กัน
จะเห็นข้อความที่ Console หากเรียกใช้งาน methods doSave สำเร็จ
ถัดไปมาลองใช้งาน Vue Devtools ที่ได้ติดตั้งไปแล้วในตอนแรกกันในที่นี้ผมเปิดใช้ Google Chrome ในโหมดไม่ระบุตัวตน หากต้องการให้ใช้ Vue Devtools ได้ต้องไปเปิดการเข้าถึงก่อน
ไปที่ปุ่มสามจุดบน Chrome > moretools > Extensions
เลื่อนหา Vue.js devtools คลิกที่ DETAILS
ให้เปิดใช้งาน Allow in incognito และ Allow access to file URLs
แล้วก็ไปที่ inspect ที่เปิดไว้ก่อนหน้านี้ หากใช้งานได้จะขึ้น tab vue ตามภาพหากไม่ขึ้นให้ปิด Browser แล้วเปิดใหม่
โดยผมจะเปลีี่ยนการแสดง inspect ให้ไปอยู่ด้านขวา คลิกที่ปุ่มสามจุดด้านขวาสุดของ console inspect เลือกเมนูให้ไปอยู่ขวาตามภาพ
จากนั้นเลือกที่ tab vue devtools จะได้แถบเครื่องมือสำหรับการ debug vue application ซึ่งในแถบที่วงไว้เป็นส่วนของ component ของหน้าปัจจุบัน
และแถบฝั่งขวาจะแสดงส่วนของ data ซึ่งจะเห็นว่ามี computed อยู่ด้วย
ลองแก้ไขค่าดูกัน จะเห็นว่ามีการอัพเดตแบบ realtime ด้วย
เราสามารถแก้ไขค่าผ่าน vue devtools ได้ด้วย โดย double click ที่ค่าที่ต้องการแก้ไข ลองแก้ไขและกดปุ่มบันทึก
ค่าที่แก้ไขก็จะเปลี่ยนไปทันที O_O wow
5. v-if/v-show
ต่อมา v-if, v-show ผมจะทำการสร้างไฟล์ใหม่ชื่อ 05-v-if-v-show.vue ในโฟลเดอร์ vue-ability เช่นเดิมแล้วทำการ copy จากไฟล์ 04-methods.vue มาวางและแก้ไขเพิ่มเติมตามภาพ แล้วไปที่ url
localhost:3000/vue-ability/05-v-if-v-show
จากภาพด้านบนมีการเพิ่มตัวแปร ok: true ใน data() เพื่อใช้กับ v-if,v-show สำหรับซ่อนหรือแสดง tag ที่ต้องการ โดยในที่นี้คือ
<h1 v-if="ok">Hello {{ name }}</h1>
<h2 v-show="ok">UP NAME - {{ upperName }}</h2>ต่อมาเพิ่มการ toggle ค่าใน ฟังก์ชัน doSave() ในส่วนของ methods สำหรับกดคลิกปุ่มให้เปลี่ยนค่าของ ok แล้วลองทดสอบคลิกที่ปุ่ม ดูว่าเกิดอะไรขึ้น
จะเห็นว่าส่วนที่เราใส่ v-if,v-show ไว้ถูกซ่อนและแสดงหลังจากกดปุ่ม Save ที่นี้การซ่อนแสดงที่ใช้ v-if กับ v-show ต่างกันตรงไหน
ให้เปิด chrome inspect เพื่อเช็คดู
จากภาพเป็นตอนก่อนกดปุ่มและหลังกดปุ่มซ่อน
- v-if : ส่วนของ tag นั้นจะหายไปกลายเป็น
<!---->comment - v-show : ส่วนของ tag นั้นจะถูกซ่อนด้วย
style=”display:none;”ทำให้มองไม่เห็น
ซึ่งตัว v-show จะให้ performance ที่ดีกว่า v-if เนื่องจาก v-if จะต้องสร้าง DOM ใหม่เมื่อตรงเงื่อนไขแต่ v-show แค่ซ่อนแสดงด้วย stylesheet
6. v-for
ต่อมา v-for ใช้สำหรับวนลูปแสดงข้อมูลจาก array หรือ object ในตัวอย่างผมจะสร้างไฟล์ใหม่ชื่อ 06-v-for.vue ในโฟลเดอร์ vue-ability แล้วก็เพิ่มโค๊ดตามภาพ
ในโค๊ด v-for ใช้วนลูปค่าใน student ซึ่ง v-for จะต้องกำหนด key ลงไปด้วยซึ่งมันก็คือ v-bind:key เขียนย่อเป็น :key
โดยที่ :key ใช้เป็นตัวอ้างอิงใน v-for และต้องเป็นค่าที่ไม่ซ้ำกัน ถ้าหากซ้ำจะมีการแจ้งเตือนที่ console ของ Browser ว่าโปรแกรมอาจจะเกิดข้อผิดพลาดได้
7. css class binding
ตัวอย่างเรื่อง css class binding ในที่นี้จะสร้างไฟล์ใหม่ชื่อ 07-css-class-binding.vue ในโฟลเดอร์ vue-ability แล้วก็ไป copy code จากไฟล์ 06-v-for.vue มาวาง และแก้ไขโค๊ดตามภาพ
จากภาพจะเพิ่ม score ไปที่ object student เพื่อใช้เป็นเงื่อนไขสำหรับการกำหนด class ให้ tag element นั้น
:class=”{ fail: st.score < 50, good: st.score >= 80 }”
v-bind:class หรือ:class คือ ตัวที่ใช้ในการ bind class ให้กับ tag element นั้น
ซึ่งใน :class เรากำหนดเงื่อนไขให้เติม class fail หาก score น้อยกว่า 50 และ เติม class good หาก score มากกว่าเท่ากับ 80
การใส่ชื่อ class ใน :class นั้นหากชื่อ class เป็น kebab-case ต้องครอบชื่อ class ด้วย 'class-name' (single quote) เช่น
:class=”{ 'text-fail': st.score < 50 }”
รายละเอียดเพิ่มเติม
Vue.js — Class and Style Bindings
8. Nuxt Routing
การทำ Routing ใน Nuxt.js สำหรับเปลี่ยนไปหน้าอื่น ในที่นี้จะสร้างไฟล์ชื่อ index.vue ในโฟลเดอร์ vue-ability และเพิ่ม routing
โดยใช้ <nuxt-link to="/pathname"> Text </nuxt-link> ตามภาพ
ซึ่งใน attributeto=”/pathname” ก็คือชื่อ path ไฟล์ที่เราจะให้คลิก link ไปนั่นเอง
เช่น หากต้องการทำให้คลิกไปที่หน้า01-data-binding.vue ที่อยู่ในโฟลเดอร์ vue-ability ก็ต้องใส่เป็น
<nuxt-link to="/vue-ability/01-data-binding">01 - Data Binding </nuxt-link>ซึ่งจะทำให้คลิกไปที่ หน้า 01-data-binding.vue ได้
…
เพิ่มเติมในส่วนที่ไม่มีใน video
9. Watch
จะใช้สำหรับดักจับการเปลี่ยนแปลงของ ตัวแปร หรือ ฟังก์ชัน จะทำงานหลังจาก ตัวแปรหรือฟังก์ชันนั้นทำงานเสร็จสิ้น มาดูตัวอย่างกัน
ในที่นี้ผมจะสร้างไฟล์ชื่อ 08-watch.vue ในโฟลเดอร์ vue-ability และไป copy code ที่ไฟล์ 04-methods.vue มาแก้ไขตามภาพ
โดยส่วนที่แก้ไขคือ เพิ่มตัวแปร array > namelists ในส่วนของ data() เข้ามาเพื่อใช้ในการ ส่องดู (watch) และให้ name เป็นค่าว่าง
ต่อมากรอบสีแดงที่ 1 ใช้ v-for วนลูปแสดงค่าใน namelists
กรอบสีแดงที่ 2 ใน watch จะประกาศชื่อตัวแปรหรือฟังก์ชันที่ต้องการ ส่องดู(watch) ในที่นี้คือตัวแปร namelists ซึ่งใน watch นั้นจะประกาศเป็นรูปแบบของ function
โดยใน namelists() เราจะทำการส่องดูว่า ค่าใน namelists มีจำนวนมากกว่า 4 หรือเปล่า ซึ่งถ้ามากกว่าให้แสดง alert
กรอบสีแดงที่ 3 ใน methods doSave ให้ทำการ push ค่า name ลงไปใน namelists และทำให้ name เป็นค่าว่าง
ผลลัพธ์การทำงาน หากเพิ่มชื่อลงไปใน namelistsยังไม่เกิน 4 จะไม่มีอะไรเกิดขึ้น แต่ถ้าจำนวน namelists เกิน 4 ก็จะแสดง alert ขึ้นในทุกๆครั้ง
จบ part 2 ครับ…
