របៀបប្រើប្រាស់ 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 ផ្តល់អោយដូចខាងក្រោម៖

download-vue-js

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

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

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

vue-show-meassage

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

vue-show-meassage2

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

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

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

resutl_message

  • របៀបបង្កើត Link

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

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

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

link2

កូដនៅលើ main.js

code_link_on_vue

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

  • របៀបប្រើ Loop  and if

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

loop_vue-js

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

loop_vue-2

loop_vue3

នៅលើបន្ទាត់ទី 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 រូចធ្វើការសរសេកូដដូចខាងក្រោម

event-vue-1

event-vue-2

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

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

event-vue-3

event-vue-4

នៅក្នុងMethods មាន Function ចំនូន ២ ហើយ Function : createNewperson គឺសំរាប់ បន្ថែមឈ្មោះថ្មីទៅលើ Persons

ចំនែក function function : clearPerson សំរាប់ធ្វើការលុបអក្សពេលដែលលោកអ្នកធ្វើការ ចុច ESC។

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖

result_even_method-vue-js