สารบัญคู่มือ Yii Framework 2 (Yii2)
พื้นฐาน Yii Framework คืออะไร หลักการทำงานของ Yii Framework 2 Request Life Circle ทำความเข้าใจ MVC ใน Yii Framework 2 ทำความเข้าใจเส้นทาง (R…
admin
69,371
บทเรียนที่เกี่ยวกับ “vue”
พบ 30 บทเรียน
admin
69,371
Yii Framework2 กับ VueJS เรียก JSON ด้วย Axios
ในบทความนี้เป็นแนวทางในการนำ VueJS มาใช้ร่วมกันกับ Yii Framework 2 ในการโหลดข้อมูล API / JSON มาแสดงผลด้วย Axios โดยไม่ได้ Refresh หน้าเว็บ…
admin
10,112
สารบัญคู่มือการใช้งาน VueJS2
ทดลองเรียกใช้ VueJS และทดลองเขียน ทดสอบการทำงาน See the Pen Vue01 by Manop Kongoon (@kongoon) on CodePen. Vue.js: สวัสดีชาวโลก! Vue.js: เงื่…
admin
8,495
Vue.js: สวัสดีชาวโลก!
สำหรับบทเรียนรู้นี้มาสวัสดีชาวโลกหรือ Hello World กับ Vue.js กันนะครับ ในที่นี้จะใช้การเรียก Vue.js ผ่าน Browser โดยไม่ได้ติดตั้งผ่าน cli เพ…
admin
6,034
Vue.js: การจัดการเมื่อผู้ใช้คลิกปุ่ม
เมื่อผู้ใช้ทำบางอย่างเช่นการคลิกปุ่ม เราสามารถเขียนโปรแกรมให้ทำงานบางอย่างได้ผ่าน method โดยเมื่อเกิด action เช่น click ให้เรียก method ที่ต…
admin
6,113
Vue.js: v-model
v-model เป็นการ 2 way binding คือเมื่อเปลี่ยนแปลงค่าฝั่ง html ฝั่ง program data ก็เปลี่ยนตาม เช่นกันเมื่อเปลี่ยนฝั่ง program data ฝั่ง html…
admin
8,131
Vue.js: Components
Components ใน Vue เป็นการกำหนดชิ้นส่วนการแสดงผลใน vue application ซึ่งเราสามารถแบ่งการทำงานให้เป็นอิสระต่อกันได้ index.html <html> <head> <l…
admin
4,209
Vue.js: Data และ Methods
ในบทเรียนรู้นี้เรามาเรียนรู้ data หรือ ข้อมูล และ methods หรือ กระบวนการ โดยมี code ดังต่อไปนี้ data จะอยู่ภายใน tag data:{} เช่น data: { te…
admin
6,001
Vue.js: Events
events เป็นเหตุการณ์เมื่อผู้ใช้งานทำบางอย่างกับ web application เช่น click เป็นต้น แล้วเราจะให้เกิดอะไรขึ้น เราก็สามารถกำหนด หรือดักจับ even…
admin
3,775
Vue.js: Event modifiers
สำหรับ event modifiers นั้นเป็นการกำหนดรายละเอียดให้กับ event เช่น คลิกได้แค่ครั้งเดียว โดยใช้ .once เป็นต้น โดยสามารถกำหนดค่าต่างๆ ได้ดังต่…
admin
3,967
Method สำหรับการ Validate ข้อมูลใน NuxtJS
เราสามารถเขียน method สำหรับการ validate ข้อมูลใน NuxtJS ได้ เช่นตัวอย่างนี้จะเป็นการตรวจสอบ params ที่ request ว่าให้เป็นตัวเลขเท่านั้น pag…
admin
3,483
Laravel PHP Framework Tutorial - Full Course for Beginners (2019)
https://www.youtube.com/embed/ImtZ5yENzgE?autoplay=0&time=0&enablejsapi=1&origin=https%3A%2F%2Fcodequs.com&widgetid=1 Learn Laravel 5.8 by c…
admin
3,398
เริ่มต้นทำ Web Application ด้วย NuxtJS
Nuxt.js เป็น JavaScript Framework ที่ Base on Vue.js libary (vue, vue-router และ vuex) และเครื่องมือพัฒนาอันทรงพลัง (webpack, Babel และ Post…
admin
12,895
การสร้างหน้า Page ใน NuxtJS
สำหรับ NuxtJs นั้นเราสามารถสร้างหน้า page เก็บไว้ใน folder pages โดย NuxtJS จะนำชื่อไฟล์ไปสร้างเป็น route ให้โดยอัตโนมัติ เช่น ไฟล์ชื่อ post…
admin
3,546
การนำ Bootstrap4 มาใช้กับ NuxtJS
Bootstrap4 เป็น CSS Framework จาก Twitter ที่มีคนใช้งานเป็นจำนวนมาก สามารถดูเพิ่มเติมได้จากเว็บไซต์ getbootstrap.com ซึ่งเราสามารถนำมาใช้กับ…
admin
7,304
การสร้าง Nav components ใน Nuxt และการเรียกใช้งาน
ในขั้นตอนนี้เรามาสร้าง Navbar แบบ component ใน nuxtjs โดยสร้างไฟล์ components/Nav.vue จากนั้นเขียนคำสั่งดังนี้ <template> <nav class="navbar…
admin
5,328
การสร้างไฟล์ CSS ไว้ใช้งานแบบ Global ใน Web Application NuxtJS
ในบทเรียนรู้นี้เรามาสร้างไฟล์ CSS แล้วนำมาโหลดเข้าใช้งานแบบ Global CSS ใน NuxtJS โดยเราจะสร้างไฟล์ main.css ใน assets/styles/main.css จากนั้…
admin
4,132
การสร้างหน้าแสดง Error ใน NuxtJS
เราสามารถเขียนหน้าจอแสดง Error หากไม่พบหน้า โดยสร้างไฟล์ layouts/error.vue จากนั้นใส่คำสั่งแสดง error ตามต้องการลักษณะดังนี้ <template> <div…
admin
2,585
ดึงข้อมูล API ด้วย Axios ใน NuxtJS
ใน nuxtjs มี package axios ที่ embbed มาด้วย ชื่อ @nuxtjs/axios ดังนั้นเราสามารถเรียกใช้งานได้ ในที่นี้จะทดสอบเรียก api จาก jsonplaceholder…
admin
8,860
สร้าง Component และเรียกใช้ Component ใน Nuxt
ในบทเรียนรู้นี้เรามาสร้าง Component ใน NuxtJS และเรียกใช้งาน โดยจะดึงข้อมูลมาจาก API จากนั้นนำมาใส่ใน Card ของ Bootstrap4 ดังนี้ สร้างไฟล์ c…
admin
7,317
การใช้งาน Nuxt Link
Nuxt Link เป็นการกำหนด Link ไปยังหน้าต่างๆ ที่มีใน Web Application โดยจะใช้คำสั่ง nuxt-link ซึ่งมีลักษณะการใช้งานดังตัวอย่างต่อไปนี้ <templa…
admin
6,103
Route Parameter ใน NuxtJS
เราสามารถเข้าถึง route parameter ของ nuxtjs ได้โดยใช้ $route โดยสามารถกำหนดในไฟล์ดังนี้ {{$route.params.id}} ตัวอย่างไฟล์ pages/users/_id/in…
admin
5,192
Vue.js: Data Binding
สำหรับ data binding นั้นมีหลายแบบมาทดลองเขียน binding สำหรับ html element ดังตัวอย่างต่อไปนี้ กำหนดผ่าน v-bind:html element เช่น <input type…
admin
4,867
Angular คืออะไร
Angular คือ เฟรมเวร์ค (framework) สำหรับสร้างแอพลิเคชั่นในฝั่งไคลเอ็นในรูปแบบของ HTML, CSS และ JavaScript/TypeScript ซึ่ง TpyeScript จะถูก c…
admin
39,187
ทำความเข้าใจกับ Nuxt child components
สำหรับ nuxt-child component นั้น ให้มองถึง layout หลัก กับ ไฟล์ที่ render แต่ละหน้า แต่ในที่นี้จะมาดูตัวอย่างใน pages เช่นเรามี folder pages…
admin
3,389
Vue.js: Component ที่มี props
อีกคุณสมบัติหนึ่งของ vue เราสามารถกำหนด props ใน component ได้ ดังตัวอย่างต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="ind…
admin
10,564
Vue.js: วนลูปด้วย For
ในการวนลูปด้วย Vue นั้นเราสามารถใช้ v-for ในการวนลูปได้ดังตัวอย่างต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="index.css">…
admin
5,951
Vue.js: เงื่อนไข (Conditionals)
สำหรับเงื่อนไขในการเขียนโปรแกรมใน Vue จะใช้คำสั่งที่เรียกว่า v-if นั่นเอง โดยมีตัวอย่างของการเขียนดังต่อไปนี้ index.html <html> <head> <link…
admin
6,758
แสดงหน้าเว็บ 1 รายการจาก API ด้วย Nuxt
บทเรียนรู้นี้เรามาเขียนโปรแกรมแสดงหน้าเว็บ 1 รายการจากหน้า index ที่รวมเนื้อหาไว้ เช่น หน้ารวมของ Blog เมื่อคลิกแต่ละเรื่องก็จะแสดงรายละเอีย…
admin
4,497
การสร้างหน้า Page แบบ Nested Page
ใน nuxtjs page เราสามารถสร้างหน้า page แบบ nested ได้ ตัวอย่างการเรียกใช้งานส่วนใหญ่ เช่นการเปิด posts/index จะเรียก post ทั้งหมด หากเปิด po…
admin
2,661