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

អត្ថបទនេះ 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 បានផ្តល់ជូនដូចខាងក្រោម៖

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

structure-of-code

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

style

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

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

app-js

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

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

html

html2

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

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

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

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

answer