เรียน Nuxt ตาม Vue JS Guideline Ep-0

บทความนี้จะ Ref : VueJS Guide นะครับ

ผมจะมาทำชาเลนจ์ฝึกเขียน Nuxt ตาม Vue JS Guideline นะครับ เพราะฉะนั้นเนื้อหาจะตามไกด์ของเว็บเลย ด้วยความที่ผมก็มือใหม่ด้านเว็บมากๆ (สาย Mobile📱) อาจมีข้อมูลตกหรืออธิบายผิดพลาดสามารถบอกได้ทันทีครับ 👏

ทำไมต้อง Nuxt.jsใช้แค่ Vue.js ธรรมดาไม่ได้หรอ ?

ถ้าให้ตอบตามจริงตอนนี้เลยนะครับ “ไม่รู้ครับ” ตอนแรกจะฝึกเขียนเว็บด้วย Vue แต่หาใน google แล้วคำว่า Nuxt.js มันเด่นสะดุดตาก็เลยหาเรียนประดับความรู้นะครับ

พอลองหาอ่านๆดูก็พอจะได้ข้อมูลคร่าวๆว่า

• Nuxt รองรับทั้ง SSR (server-side Rendering) / SPA (Single page application)
• เหมาะกับการทำงานเป็นทีม
• จัดการโค้ดง่ายเหมาะกับโปรเจคใหญ่
• Nuxt ปรับให้ plug-in ของ vue.js ทำงานร่วมกันได้ดี
• เราแค่ install Nuxt.js ครั้งเดียวกสามารถใช้งานทันที เพราะได้รวมของที่จำเป็นต้องใช้อย่าง Vue-router, Vuex, Vue-head, Webpack, Babel มาให้หมดแล้ว

Contents

• Declarative Rendering
• Conditionals and Loops
• Handling User Input
• Composing with Components

Declarative Rendering

คือการนำค่าที่ประกาศไว้มาแสดง โดยทุกอย่างที่อยู่ภายใต้ Template สามารถเรียกใช้ตัวแปลที่อยู่ใน data ได้ตรงๆเลย เหมือน this.()

results

เราสามารถ bind element attributes คือสามารถเรียกใช้ตัวแปรได้เหมือนกัน

ถ้าใน nuxtJS เราไม่จำเป็นต้อง v-bind ก็ได้เหลือไว้แค่ : พอครับ

results

Conditionals and Loops

IF-Else

เงื่อนไขต่างๆ ถ้า…จริงทำ…

results

For loop

แต่ทุกครั้งที่เราใช้ v-for เราต้องกำหนด key ให้มันด้วยนะครับ (v-bind:key)

โดยการกำหนด key มีอยู่ 2 แบบนะครับ

1. กำหนด id ให้แต่ละตัวเลย
2. ให้ auto id ให้ todos แต่ละตัวเองก็ได้ แต่ index แรกจะเริ่มจาก 0

Handling User Input

Button

สร้างปุ่มเพื่อโต้ตอบกับผู้ใช้เมื่อคลิกกันดูครับ

โดย NuxtJS เราจะสร้าง button แล้วใช้@click เพื่อรับคำสั่งจากลูกค้า

จะสังเกตุว่ารอบนี้เราใช้ this. แล้วเพราะว่าอยู่นอก data กับ template แล้วจะไม่สามารถเรียกใช้ตัวแปรตรงๆได้ครับ

Logic methods ก็ไม่มีอะไรมากครับ แยกตัวอักษร สลับ นำมารวมกันใหม่

before

after

Input

ทำช่องรับข้อมูลจากลูกค้าแล้ว v-model จะ binding มาแสดงค่าออกมาทันทีครับ

results

Composing with Components

โดยปกติในการเขียนเว็บในโปรเจคใหญ่ๆเราจะแยกโค้ดเป็นก้อนๆเพื่อ Re-use code ในอนาคต มองเป็น tree of components ก็ได้ครับ

https://vuejs.org/images/components.png

Top Tree

components

results

เขียนแบบแยก components เวลาแสดงผลจะไม่มีความแตกต่างแต่มันจะช่วยให้เราแก้ไขแต่งเติมอะไรๆได้ง่ายขึ้นครับ

บทความแรกผมขอจบเพียงเท่านี้ก่อนแล้วมาต่อกันในบทความหน้านะครับ

ถ้ามีอะไรผิดพลาดสามารถแจ้งได้เลยนะครับ ขอบคุณครับ