របៀបប្រើប្រាស់ Vue.js Javscript Framework

អត្ថបទនេះនិយាយអំពីការប្រើប្រាស់ Vue.js គឺជាប្រភេទ Javascript framework ដែលមានការរីកជាចំរើនទៅលើផ្នែក (user Interface)។ Vue ត្រូវបានគេបង្កើតឡើងដើម្បីជាការអនុម័តបន្ថែម ហើយ Lirbray គឺផ្តោតទៅលើ ការបង្ហាញ Layer ហើយ វាមានភាពងាយស្រូលក្នុងការយកមករូមបញ្ចូលជាមួយគម្រោងផ្សេងទៀតឬ Libray ដែលមានស្រាប់។

នៅក្នុងអត្ថ បទនេះគឺជាអត្ថបទទី២ បន្ទាប់ពីអត្ថមុន លក្ខណៈពិសេសរបស់ Vue.js ធៀបទៅនឹង React និង Angular 2 ដែលបានណែនាំ អំពី Vue.js នេះ។ នៅក្នុងអត្ថបទនេះផងដែរ Techfree ធ្វើការបង្រៀនលោកអ្នកអំពីការប្រើ ប្រាស់ Vue.js ជាមួយឩទាហរណ៏ មួយចំនូនដូចខាងក្រោម៖

របៀបតំឡើង Vue.js

នៅចំនុចនេះ Techfree បង្រៀនអ្នកទាំងអស់គ្នាអំពីរបៀបដំឡើង Vue.js ហើយការតំឡើងវាមិនមានអ្វីស្មុស្មាញប៉ុន្មានទេ ដោយគ្រាន់តែលោកអ្នកចូលទៅកាន់គេហទំព័ររបស់ Vue.js ហើយធ្វើការទាញយក Libray នឹងធ្វើការអនុវត្តន៍ ដូចទៅនឹង Techfree ផ្តល់អោយដូចខាងក្រោម៖

បន្ទាប់ពីលោកអ្នកធ្វើការទាញយកមករូចរាល់ហើយសូមធ្វើការហៅ Class Libray យកមកប្រើ<script src=”js/vue.js” charset=”utf-8″></script> វាដូចទៅនឹងការហៅ Class Library ដែរ។

របៀបបង្ហាញ ទិន្នន័យ

ឩទាហរណ៍៖ លោកអ្នកធ្វើការបង្កើតmain.js រូចធ្វើបញ្ចូលកូដដូចខាងក្រោម។

នៅលើបន្ទាត់ទី២ គឺជា ហៅ Element ID ពី Template
បន្ទាប់មកធ្វើការបង្កើតindex.html រូចធ្វើបញ្ចូលកូដដូចខាងក្រោម។

នៅលើបន្ទាត់ទី 10 មានន័យថាធ្វើការហៅ Data ក្នុង main.js មកបង្ហាញ

នៅលើ បន្ទាត់ទី 11 v-model =”message” ជា property របស់ vau.js មានន័យថាលោកធ្វើការកែនឹងលុបទៅលើ message បាន។

បន្ទាប់ពីលោកអ្នកធ្វើការបញ្ចាប់ការសរសេកូដខាងលើ លទ្ធផលដូចខាងក្រោម៖

របៀបបង្កើត Link

ការបង្កើត link នៅលើ vue.js កូដខាងក្រោមនឹងធ្វើការបង្រៀនលោកអ្នកអំពី Link នេះ។

link ដោយប្រើ v-bind:href=”” ជាមួយ URL property

ឩទាហរណ៍: កូដលើ index.html

កូដនៅលើ main.js

បន្ទាប់ពីលោអ្នកធ្វើការ refresh page នឹងឃើញ Link To Techfree។

របៀបប្រើ Loop and if

លោកអ្នកធ្វើការបង្កើត main.js រូចធ្វើការសរសេកូដដូចខាងក្រោម៖

លោកអ្នកធ្វើការបង្កើត Array person ដែលមាន ៤ ធាតុ បន្ទាប់បង្កើត index.html រូចធ្វើការសសេកូដដូចខាងក្រោម៖

នៅលើបន្ទាត់ទី 17 មាន property v-for គឺសំរាប់សំរាប់ Loop Person យកមកបង្ហាញ។

នៅលើបន្ទាត់ទី v-if គឺជាលក្ខខណ្ឌ if សំរាប់សិក្សានៅពេលលោកអ្នកធ្វើការ Check ហើយ Uncheckនៅលើ Checkbox។

នៅលើបន្ទាត់ទី26 v-model សំរាប់ធ្វើការហៅ person ដែលលោកអ្នកធ្វើកាផ្តល់តំលៃអោយស្មើ True នៅក្នុង main.js នោះ

របៀបប្រើប្រាស់ event នឹង Methods

នៅក្នុងចំនុចនេះ Techfree នឹង លើកយកឩទាហរណ៍ ដែលពាក់ពន្ធ័ទៅនឹង ការបញ្ចូលទិន្ន័យ ជាមួយ event Methods ដូចខាងក្រោម៖

លោកអ្នកធ្វើការបង្កើត File ថ្មីមួយ event.html រូចធ្វើការសរសេកូដដូចខាងក្រោម

នៅលើបន្ទាត់ទី 25: v-on:keyup.esc=”clearPerson” មានន័យថាលោកអ្នកធ្វើការលុបអក្សចេញពី input ដោយប្រើ Key ESC ហើយ v-on:keyup.enter វិញមាននយ័ថាលោកអ្នកធ្វើការបញ្ចូនទិន្នន័យដោយប្រើ Key Enter

បន្ទាប់មកលោកអ្នកធ្វើការសរសេ File មូយទៀត event.js រូចសរសេកូដដូចខាងក្រោម៖