Zenler Player
กำลังโหลดคอร์สเรียน กรุณารอสักครู่
Vue.js
กลับไปหน้าหลักสูตร
0% สมบรูณ์
0% สมบรูณ์
รู้จักกับ Vue.js
ติดตั้ง Node.js, Visual Studio Code, Vetur และ @vue/cli
สร้างและทดลองแอปพลิเคชันแรก
โครงสร้างหลักของแอปพลิเคชัน
พื้นฐานคอมโพเนนต์
รู้จักกับคอมโพเนนต์และสำรวจโครงสร้างของคอมโพเนนต์
ลำดับขั้นของคอมโพเนนต์และการนำคอมโพเนนต์ไปไว้ภายใต้คอมโพเนนต์อื่น ๆ
ภายในเทมเพลตจะต้องมีเอลิเมนต์เดียวและใช้ฟังก์ชัน DATA() กำหนดข้อมูลที่ใช้ภายในคอมโพเนนต์
ประกาศเมธอดลงในออบเจ็กต์ methods, วิธีอ้างอิงและใช้งานพร็อพเพอร์ตี้
วิธีใช้งานและแสดงผลลัพธ์จากเมธอดและขอบเขตของสไตล์ในแต่ละคอมโพเนนต์
รู้จักกับ Bootstrap การลิงก์ไปยัง CSS ของ Bootstrap และลิงก์ไปยัง CSS ของ Font Awesome
การกำหนด Container หลักการปรับแต่งปุ่มคำสั่งด้วย Bootstrap และการแสดงข้อความแบบต่างๆ
ระบบ Grid การกำหนดความกว้างคอลัมน์ การกำหนดจำนวนคอลัมน์ตามขนาดหน้าจอ การเปลี่ยนจำนวนคอลัมน์เมื่อขนาดหน้าจอต่างกัน และการแสดงหรือซ่อนเอลิเมนต์เมื่อขนาดหน้าจอต่างกัน
การปรับแต่งแบบฟอร์ม
รู้จักกับ Data Binding การแสดงข้อมูลโดยใช้ String Interpolation และการกำหนดค่าแอตทริบิวต์ไปยังแท็กด้วย Attribute Binding
การใช้ Computed Properties ใน Vue.js
รับข้อมูลจากผู้ใช้ด้วย Event Binding
สร้าง LoginForm คอมโพเนนต์ การกำหนดพร็อพเพอร์ตี้สำหรับใช้กับแบบฟอร์ม การกำหนด Two Way Data Binding และการส่งแบบฟอร์มใน Vue.js
ตรวจสอบความถูกต้องของข้อมูลในแบบฟอร์ม
รู้จักกับ DOM, DirectiveDirective การกำหนด class แบบไดนามิกใน Vue.js
ตัวอย่างการใช้คลาส v-bind
ตัวอย่างการเปลี่ยนสีพื้นหลังเมื่อกรอกตัวเลข
ทบทวนพื้นฐานเกี่ยวกับคอมโพเนนต์ รับส่งข้อมูลระหว่างคอมโพเน้นต์ด้วย props และ custom event รู้จักกับ props วิธีผ่านค่า props และวิธีรับค่า props มาใช้ใน Child คอมโพเนนต์
ตัวอย่างการส่งรายชื่อนักเรียนไปทาง Prop การส่งข้อมูลกลับไปให้ Parent คอมโพเน้นต์ด้วย Custom Event
การใช้ Customer event ลบข้อมูลและการสร้าง Student คอมโพเนนต์เก็บข้อมูลของแต่ละคน
รู้จักกับฟิลเตอร์ใน Vue.js การกำหนดฟิลเตอร์ขึ้นใช้งาน และตัวอย่างการเปลี่ยนข้อความให้เป็นตัวใหญ่
ตัวอย่างการใส่เครื่องหมาย ... เมื่อข้อความยาวเกินกำหนด การกำหนดพารามิเตอร์ไปยังฟิลเตอร์ ตัวอย่างการแสดงวันที่แบบไทย
รู้จักกับ Component Lifecycle และการเรียกใช้ Lifecycle Hook
ใช้ HTTP Request เพื่อโหลดข้อมูลมาใช้ใน Vue ข้อมูลตัวอย่างจาก jsonplaceholder
1. รู้จักกับ Vue.js และจุดเด่นของ Vue
รู้จักกับ Vue.js
ดูตัวอย่าง
ติดตั้ง Node.js, Visual Studio Code, Vetur และ @vue/cli
สร้างและทดลองแอปพลิเคชันแรก
2. การทำงานของ Vue แอปพลิเคชัน
โครงสร้างหลักของแอปพลิเคชัน
พื้นฐานคอมโพเนนต์
3. คอมโพเนนต์
รู้จักกับคอมโพเนนต์และสำรวจโครงสร้างของคอมโพเนนต์
ลำดับขั้นของคอมโพเนนต์และการนำคอมโพเนนต์ไปไว้ภายใต้คอมโพเนนต์อื่น ๆ
ภายในเทมเพลตจะต้องมีเอลิเมนต์เดียวและใช้ฟังก์ชัน DATA() กำหนดข้อมูลที่ใช้ภายในคอมโพเนนต์
ประกาศเมธอดลงในออบเจ็กต์ methods, วิธีอ้างอิงและใช้งานพร็อพเพอร์ตี้
วิธีใช้งานและแสดงผลลัพธ์จากเมธอดและขอบเขตของสไตล์ในแต่ละคอมโพเนนต์
4. การใช้ Bootstrap กับ Vue.js
รู้จักกับ Bootstrap การลิงก์ไปยัง CSS ของ Bootstrap และลิงก์ไปยัง CSS ของ Font Awesome
การกำหนด Container หลักการปรับแต่งปุ่มคำสั่งด้วย Bootstrap และการแสดงข้อความแบบต่างๆ
ระบบ Grid การกำหนดความกว้างคอลัมน์ การกำหนดจำนวนคอลัมน์ตามขนาดหน้าจอ การเปลี่ยนจำนวนคอลัมน์เมื่อขนาดหน้าจอต่างกัน และการแสดงหรือซ่อนเอลิเมนต์เมื่อขนาดหน้าจอต่างกัน
การปรับแต่งแบบฟอร์ม
5. แนะนำ Data Binding และ Event Binding
รู้จักกับ Data Binding การแสดงข้อมูลโดยใช้ String Interpolation และการกำหนดค่าแอตทริบิวต์ไปยังแท็กด้วย Attribute Binding
การใช้ Computed Properties ใน Vue.js
รับข้อมูลจากผู้ใช้ด้วย Event Binding
6. แบบฟอร์มใน Vue.js
สร้าง LoginForm คอมโพเนนต์ การกำหนดพร็อพเพอร์ตี้สำหรับใช้กับแบบฟอร์ม การกำหนด Two Way Data Binding และการส่งแบบฟอร์มใน Vue.js
ตรวจสอบความถูกต้องของข้อมูลในแบบฟอร์ม
7. ไดเรกทีฟ
รู้จักกับ DOM, DirectiveDirective การกำหนด class แบบไดนามิกใน Vue.js
ตัวอย่างการใช้คลาส v-bind
ตัวอย่างการเปลี่ยนสีพื้นหลังเมื่อกรอกตัวเลข
8. วิธีส่งข้อมูลระหว่างคอมโพเนนต์
ทบทวนพื้นฐานเกี่ยวกับคอมโพเนนต์ รับส่งข้อมูลระหว่างคอมโพเน้นต์ด้วย props และ custom event รู้จักกับ props วิธีผ่านค่า props และวิธีรับค่า props มาใช้ใน Child คอมโพเนนต์
ตัวอย่างการส่งรายชื่อนักเรียนไปทาง Prop การส่งข้อมูลกลับไปให้ Parent คอมโพเน้นต์ด้วย Custom Event
การใช้ Customer event ลบข้อมูลและการสร้าง Student คอมโพเนนต์เก็บข้อมูลของแต่ละคน
9. การใช้ Filter
รู้จักกับฟิลเตอร์ใน Vue.js การกำหนดฟิลเตอร์ขึ้นใช้งาน และตัวอย่างการเปลี่ยนข้อความให้เป็นตัวใหญ่
ตัวอย่างการใส่เครื่องหมาย ... เมื่อข้อความยาวเกินกำหนด การกำหนดพารามิเตอร์ไปยังฟิลเตอร์ ตัวอย่างการแสดงวันที่แบบไทย
10. รู้จักและใช้งาน Lifecycle hook
รู้จักกับ Component Lifecycle และการเรียกใช้ Lifecycle Hook
ใช้ HTTP Request เพื่อโหลดข้อมูลมาใช้ใน Vue ข้อมูลตัวอย่างจาก jsonplaceholder
×
This is an unpublished lesson. This lesson will not be shown for students unless you set it as Public.
กลับไปที่แดชบอร์ด
ไม่มีเนื้อหาในบทเรียนนี้!
ไม่มีบทเรียน!
กลับไปที่แดชบอร์ด
เนื้อหาบทเรียนถูกล็อค
ลงทะเบียนเพื่อปลดล็อกบทเรียนนี้
ลงทะเบียนเพื่อปลดล็อค
บทเรียนต่อไป