ការប្រើ Template នៅក្នុង VueJS

• Khemarak In


• 5 Dec 2016

អត្ថបទនេះ Techfree នឹងធ្វើការលើកយក របៀបប្រើប្រាស់ Template syntax នៅក្នុង Vue Js។  នៅក្នុងអត្ថបទនេះផងដែរ Techfree នឹងធ្វើការលើយក រូបមន្តមួយចំនួនយកមកធ្វើការបង្ហាញជូនលោកអ្នកដូចខាងក្រោម ៖

1. ការប្រើ v-bind:class ដែលប្រើនៅក្នុង attribute HTML សំរាប់ធ្វើការភ្ចាប់ជាមួយ css class
2. ការប្រើ v-one ដែលប្រើនៅក្នុង attribute HTML គឺសំរាប់កំនត់តម្លៃដោយមិនបានផ្លាស់ប្តូរទិន្នន័យ
3. ការប្រើ v-html ដែលប្រើនៅក្នុង attribute HTML គឺសំរាប់កំនត់ទំរង់បង្ហាញលក្ខណះជា HTML
4. ការប្រើ substr() គឺជា Method សំរាប់ធ្វើការកាត់ទៅលើអក្សរ
5. ការប្រើ Concat()គឺជា Method សំរាប់ធ្វើការទៅបន្ថែមទៅលើអក្សរconcat(“Text”)

• ការប្រើ Fitter

1. ការបំលែង ទ្រង់ទ្រាយអក្សរ ទៅអក្សរតូច ឬ អក្សរធំ

   {{ name| capitalize }}

2. ការប្រើប្រាស់រូបមន្តដូចជាការ គណនា {{ price * 0.2 }}

ដើម្បីអោយកាន់តែច្បាស់លោកអ្នកអាចធ្វើការអនុវត្តកូដដែល Techfree បានផ្តល់ជូនដូចខាងក្រោម៖

• ធ្វើការបង្កើតរចនាសម្ព័ន្ធកូដ

1. បង្កើត Css File > css/style.css លោកអ្នកធ្វើការបញ្ចូលកូដដូចខាងក្រោម៖

2.សំរាប់ js File => js/vue.js វាជា Library មានស្រាប់របស់ Vue លោកអ្នកទាញយកមកពីគេហទំព័ររស់ Vue.js ជាការស្រេច។

3. បង្កើត js File > js/app.js លោកអ្នកធ្វើការបញ្ចូលកូដដូចខាងក្រោម៖

filters: គឺប្រើទៅការកំណត់ទំរង់ Text ហើយ Filters អាចប្រើប្រាស់បានពីរកន្លែង mustache interpolations and v-bind expressions។Filters គឺប្រើដោយសញ្ញា {{ message |capitalize }}។

4.បង្កើត HTML File > index.html លោកអ្នកធ្វើការបញ្ចូលកូដដូចខាងក្រោម៖

+ v-bind:class=’myvar’ គឺប្រើនៅក្នុង HTML attribute ហើយយើងប្រើដើម្បីកែប្រែ HTML attribute ដូចចង់កែប្រែព័ណ៌អក្សរជាដើម។

+ v-html សំរាប់បង្ហាញតំលៃពិតរបស់ HTML ដែលបានផ្តល់អោយក្នុង Data object

+ v-once គឺប្រើសំរាប់បង្ហាញតម្លៃដោយមិនផ្លាស់ប្តូរ ដែលបានផ្តល់អោយក្នុង Data object

• កូដខាងលើនឹងបង្ហាញទំរង់ដូចខាងក្រោម៖