Vue directives (auto focus )

Directives ក្នុង Vue.js គឺជាផ្នែកសំខាន់មួយនៃ Vue ដែលអនុញ្ញាតឱ្យអ្នកអាចនាំយកលក្ខណៈពិសេសរបស់ Vue ចូលទៅក្នុង HTML ដោយផ្តោតលើការបង្កើតនិងគ្រប់គ្រងការបង្ហាញរបស់ UI ។ Directives គឺជាការណែនាំ (instructions) សម្រាប់ Vue ដែលអ្នកអាចដាក់ចូលក្នុង HTML attributes ។

auto focus local

auto focus គឺប្រើសម្រាប់ form ដែលត្រូវបញ្ចូលព័ត៌មាននៅប្រអប់ ដោយយើងបើក page មកឲ្យមាន cuscer នៅប្រអប់តែម្តង

<template>
  <div class="home">
    <h1>Home page</h1>
    
    <input type="text" name="" v-autoFocus>

  </div>
</template>
<script setup>

const vAutoFocus = {
  mounted(el) {
    el.focus()
  },
}

</script>

auto focus global

បង្កើត auto focos ជា global នៅ file តែមួយរួចយើងហៅមកប្រើបានច្រើនកន្លែង

- បង្កើត folder មួយនៅក្នុង folder src ដាក់ឈ្មោះថា directivs => បង្កើត file ថា vAutoFocus.js

- យើង copy កូដដែលបានសរសេរខាងលើនេះទៅដាក់នៅក្នុង file vAutoFocus.js

បន្ទាបមកយើងចូលទៅក្នុង homeView.vue យើងវីញដោយ import directives vAutoFocus

<template>
  <div class="home">
    <h1>Home page</h1>
    
    <input type="text" name="" v-autoFocus>

  </div>
</template>
<script setup>

import {vAutoFocus} from '@/directives/vAutoFocus'

</script>

ប្រើជាមួយ page ផ្សេង

---

Directives ផ្សេងៗដែលមានក្នុង Vue.js

• 1. v-bind

  បំពាក់គោលបំណងមួយ value មកក្នុង attribute មួយរបស់ element ។ វាគឺមានប្រយោជន៍សម្រាប់ dynamic attributes ។

• 2. v-model

  បំពាក់គោលបំណងមួយ value មកក្នុង attribute មួយរបស់ element ។ វាគឺមានប្រយោជន៍សម្រាប់ dynamic attributes ។

• 3. v-if, v-else-if, v-else

  ប្រើដើម្បីបង្ហាញឬលាក់ element មួយដោយផ្អែកលើលក្ខខណ្ឌមួយ ។

• 4. v-for

  ប្រើដើម្បីដើរវារនៅលើអង្គធាតុ (array) ឬវត្ថុ (object) ហើយបង្កើត element មួយសម្រាប់គ្រប់ធាតុ ។

• 5. v-on

  ប្រើដើម្បីតំណាងការបញ្ចូនព្រឹត្តិការណ៍ (event) មួយទៅលើ method មួយ ។

• 6. v-show

  ប្រើដើម្បីលាក់ឬបង្ហាញ element មួយតាមលក្ខខណ្ឌណាមួយ ដោយមិនបានលុប element ពី DOM (ប្រើ CSS display property) ។

• 7. v-pre

  បំពាក់ឱ្យ Vue មិនត្រូវចាប់ហៅ element និងចំណែកដូចនៅក្នុង element ដើម្បីសម្តែងល្បឿន។

• 8. v-cloak

  ចំណាំ element មួយដើម្បីបញ្ចប់ចុងក្រោយពេល Vue ចាប់ដំណើរការចុះក្នុង DOM ។

• 9. v-once

  ត្រួសៗបង្ហាញចំណែកនៃ DOM តែម្ដងពេលដំបូង ហើយមិនបានត្រួសៗពេលដែលមានការផ្លាស់ប្តូរទៀតទេ។