เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009
สำหรับ data binding นั้นมีหลายแบบมาทดลองเขียน binding สำหรับ html element ดังตัวอย่างต่อไปนี้ กำหนดผ่าน v-bind:html element เช่น <input type="text" v-bind:value="text" /> <br /> หรือ กำหนด ผ่าน : (colon) เช่น <a :href="web">ProgrammerThailand</a> หากตัว...
ในบทเรียนรู้นี้เรามาเรียนรู้ data หรือ ข้อมูล และ methods หรือ กระบวนการ โดยมี code ดังต่อไปนี้ data จะอยู่ภายใน tag data:{} เช่น data: { text: 'มันยอดเยี่ยมเลยใช่ไหม', universities: [ { id: 1, name: 'มหาวิทยาลัยอุบลราชธานี' }, { id: 2, name: 'มหาวิท...
ในบทเรียนรู้นี้เรามาเรียนรู้การฝัง font ลงใน web page โดยเป็น font หรือ แบบอักษร ที่ไม่มีทั่วไป ให้สามารถแสดงผลกับทุก browser ในทุกๆ เครื่องที่เปิด web page สำหรับตัวอย่างนี้จะใช้ font CSChatThai โดยสามารถดาวน์โหลดได้ที่ f0nt.com จากนั้นนำ font ที่ได้ไป generate เป็นไฟล์สำหรับน...
2 ข่าวใหญ่ไอทีไทยวันนี้ 1. Microsoft ประกาศเพิ่ม "TH Sarabun New" เป็น Font มาตรฐานใน Windows 10 "สารบรรณ" เป็นฟอนต์ประจำชาติไทยที่ถูกใช้งานโดยรัฐบาลและองค์กรภาคเอกชนต่าง ๆ โดยเป็นหนึ่งใน 13 แบบอักษรที่กรมทรัพย์สินทางปัญญา ร่วมกับ SIPA (หรือ DEPA Thailand&n...
อีกคุณสมบัติหนึ่งของ vue เราสามารถกำหนด props ใน component ได้ ดังตัวอย่างต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>...
Components ใน Vue เป็นการกำหนดชิ้นส่วนการแสดงผลใน vue application ซึ่งเราสามารถแบ่งการทำงานให้เป็นอิสระต่อกันได้ index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">...
v-model เป็นการ 2 way binding คือเมื่อเปลี่ยนแปลงค่าฝั่ง html ฝั่ง program data ก็เปลี่ยนตาม เช่นกันเมื่อเปลี่ยนฝั่ง program data ฝั่ง html ก็เปลี่ยนตาม index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn....
เมื่อผู้ใช้ทำบางอย่างเช่นการคลิกปุ่ม เราสามารถเขียนโปรแกรมให้ทำงานบางอย่างได้ผ่าน method โดยเมื่อเกิด action เช่น click ให้เรียก method ที่ต้องการ index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdeli...
ในการวนลูปด้วย Vue นั้นเราสามารถใช้ v-for ในการวนลูปได้ดังตัวอย่างต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> &...
สำหรับเงื่อนไขในการเขียนโปรแกรมใน Vue จะใช้คำสั่งที่เรียกว่า v-if นั่นเอง โดยมีตัวอย่างของการเขียนดังต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s...
สำหรับบทเรียนรู้นี้มาสวัสดีชาวโลกหรือ Hello World กับ Vue.js กันนะครับ ในที่นี้จะใช้การเรียก Vue.js ผ่าน Browser โดยไม่ได้ติดตั้งผ่าน cli เพื่อเป็นการเรียนรู้พื้นฐาน สร้างไฟล์ ให้ทำการสร้างไฟล์ 3 ไฟล์ เพื่อเป็นไฟล์ประกอบการใช้งาน คือ index.css, index.html และ index.js เขียนโปรแกรม in...
ทดลองเรียกใช้ VueJS และทดลองเขียน ทดสอบการทำงาน See the Pen Vue01 by Manop Kongoon (@kongoon) on CodePen. Vue.js: สวัสดีชาวโลก! Vue.js: เงื่อนไข (Conditionals) Vue.js: วนลูปด้วย For Vue.js: การจัดการเมื่อผู้ใช้คลิกปุ่ม Vue.js: v-model Vue.js: Components Vue.js: Component ที่...
ในบทเรียนรู้นี้เรามาเรียนรู้การสร้างฟอร์มสำหรับการแก้ไขทีละหลายๆ record ด้วย Yii Framework ซึ่งเป็นการสร้าง input แบบ multiple input นั่นเอง โดยมีตัวอย่างดังต่อไปนี้ PostController <?php namespace frontend\controllers; use Yii; use yii\base\Model; use yii\web\Controller; use comm...
ในบทเรียนรู้นี้เราจะมาสร้างลิ้งค์สำหรับเปลี่ยนภาษาในระบบ โดยทำงานร่วมกับ Package localeurls ซึ่งก่อนอื่นก็ติดตั้ง Package นี้เสียก่อนโดยพิมพ์คำสั่งใน cmd composer require codemix/yii2-localeurls จากนั้นตั้งค่าใน frontend/config/main.php ดังนี้ 'urlManager' => [ 'class' =...
สำหรับ Yii Framework 2 นั้น โดยทั่วไปเราสามารถใช้ AccessControl ในการจัดการสิทธิ์การเข้าถึงได้เพียงแค่ตรวจสอบว่า login หรือ guest (ยังไม่ login) แต่ถ้าหากเราต้องการกำหนดสิทธิ์เพิ่มเติมให้กับ user เช่น สิทธิ์ admin, staff, member เป็นต้นนั้น เราจะต้องสร้าง Rule class ขึ้นมาเพื่อตรวจสอบ แล้วกำหนดใน Ac...
สำหรับงาน WWDC 2018 ปีนี้จัดขึ้นวันที่ 4-8 มิถุนายน 2561 ซึ่งก็ตามคาดโดยงานจะจัดขึ้นในเดือนมิถุนายนของทุกปีนั่นเอง มีอะไรใหม่ในงานนี้? Apple ยังไม่ได้เปิดเผยรายละเอียดอะไรบ้างในงาน แต่ก็มีการคาดการณ์กันต่างๆ นาๆ โดยจะสรุปรายการต่างๆ ที่มีการ update ทั้ง Hardware และ Software ดังนี้ ด้าน...
ในช่วงต้นเดือนเมษายนที่ผ่านมา Microsoft ได้ทำการออก Patch เพื่อปรับปรุงด้านความปลอดภัยกว่า 66 รายการ รวมไปถึง Adobe Flash Player ด้วย โดยมีรายการการปรับปรุงดังนี้ Tag CVE ID CVE Title Adobe Flash Player ADV180007 April 2018 Adobe Flash Security Update...
สวัสดีปีใหม่ไทย 2561 อวยพรให้เหล่า Software Developer จงมีความสุขความเจริญ coding ไร้ bug ตลอดปีตลอดไปด้วยเทอญ ...ProgrammerThailand.com
สวัสดีครับ เพื่อนๆ โปรแกรมเมอร์ ไม่ทราบว่าใช้คอมรุ่นไหนกันบ้างเป็นอาวุธคู่กายในการเขียนโปรแกรมบ้างครับ และควรแนะนำน้องใหม่อย่างไรบ้างในการเลือกซื้ออาวุธคู่กาย หรือควรเริ่มต้นจากรุ่นไหนก่อน เผื่อเป็นแนวทางต่อไปครับ
ในบทความนี้เป็นแนวทางในการนำ VueJS มาใช้ร่วมกันกับ Yii Framework 2 ในการโหลดข้อมูล API / JSON มาแสดงผลด้วย Axios โดยไม่ได้ Refresh หน้าเว็บ (คุณสมบัติเด่นเขาล่ะ one page application) Package ที่จะใช้มี 3 ตัวคือ VueJS ตัวพระเอก Axios ตัวนางเอก NProgress เอาไวดู progress การโหลดข้อมูล...