Directives Vue.js-ში: გამოყენება და მაგალითები

Directives Vue.js-ში გაძლევთ საშუალებას გამოიყენოთ სპეციალური ქცევები DOM-ის ელემენტებზე. მათ აქვთ სინტაქსის პრეფიქსი v- და გამოიყენება DOM-ის მანიპულირებისთვის, მოვლენების დასამუშავებლად, ელემენტების პირობითად რენდერისთვის და სხვა. Vue.js გთავაზობთ რამდენიმე ჩაშენებულს, directives როგორიცაა, , და, რომლებიც მოიცავს საერთო გამოყენების შემთხვევების ფართო სპექტრს. v-if v-for v-bind v-on

აქ არის რამოდენიმე გავრცელებული directives Vue.js-ში:

 

1. დირექტივა: ეს დირექტივა გამოიყენება პირობითად დაფუძნებული ელემენტის გამოსატანად. v-if

მაგალითი:

<div v-if="isShow">This element is only displayed if isShow is true.</div>

 

2. დირექტივა: ეს დირექტივა გამოიყენება მასივზე ან ობიექტზე განმეორებისთვის და შესაბამისი ელემენტების შესაქმნელად. v-for

მაგალითი:

<ul>  
  <li v-for="item in items">{{ item }}</li>  
</ul>

 

3. დირექტივა: ეს დირექტივა გამოიყენება გამოხატვის მნიშვნელობის ატრიბუტთან ან ელემენტის თვისებასთან დასაკავშირებლად. v-bind

მაგალითი:

<img v-bind:src="imageUrl">

 

4. დირექტივა: ეს დირექტივა გამოიყენება ელემენტის მოვლენის მოსასმენად და დასამუშავებლად. v-on

მაგალითი:

 <button v-on:click="handleClick">Click me!</button>

 

5. დირექტივა: ეს დირექტივა ქმნის ორმხრივ კავშირს შეყვანის ელემენტსა და მონაცემთა თვისებას შორის. v-model

მაგალითი:

<input v-model="message">

 

ეს მხოლოდ რამდენიმე ძირითადია directives Vue.js-ში. თქვენ ასევე შეგიძლიათ შექმნათ თქვენი საკუთარი ჩვეულება, directives რათა შეასრულოთ კონკრეტული ქცევები თქვენს Vue.js აპლიკაციაში.