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

მოვლენების მართვა მომხმარებლებთან ურთიერთობის და აპლიკაციის მდგომარეობის შეცვლის მნიშვნელოვანი ნაწილია Vue.js-ში. Vue.js გთავაზობთ სხვადასხვა გზას მოვლენების დასამუშავებლად, მათ შორის ინლაინ მოვლენის დამმუშავებლები, მეთოდები და მოვლენის მოდიფიკატორები.

აქ არის რამდენიმე ჩვეულებრივი მოვლენა Vue.js-ში

1. click მოვლენა

ეს მოვლენა ამოქმედდება, როდესაც დააწკაპუნებთ ელემენტზე, როგორიცაა ღილაკი ან ბმული. ის ჩვეულებრივ გამოიყენება მოქმედებების შესასრულებლად ან ფუნქციების გასააქტიურებლად, როდესაც მომხმარებელი ურთიერთქმედებს ელემენტთან.

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

methods: {  
  handleClick() {  
    console.log('Button clicked!');  
  }  
}

 

2. input მოვლენა

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

<input v-model="message" v-on:input="handleInput" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleInput() {  
    console.log('Input value:', this.message);  
  }  
}

 

3. change მოვლენა

ეს მოვლენა ამოქმედდება, როდესაც შეიცვლება ფორმის ელემენტის მნიშვნელობა, როგორიცაა არჩევის ჩამოსაშლელი ველი ან ჩამრთველი. ის ჩვეულებრივ გამოიყენება მოქმედებების შესასრულებლად ან მონაცემების განახლებისთვის, ელემენტის არჩეული ვარიანტის ან შემოწმებული მდგომარეობის საფუძველზე.

<select v-model="selectedOption" v-on:change="handleSelectChange">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>

data() {  
  return {  
    selectedOption: ''  
  };  
},  
methods: {  
  handleSelectChange() {  
    console.log('Selected option:', this.selectedOption);  
  }  
}

 

4. submit მოვლენა

ეს მოვლენა ამოქმედდება ფორმის გაგზავნისას, ღილაკზე დაჭერით submit ან ველში Enter-ის დაჭერით input. ის ჩვეულებრივ გამოიყენება ფორმის წარდგენის დასამუშავებლად, მომხმარებლის დასადასტურებლად input და ისეთი მოქმედებების შესასრულებლად, როგორიცაა API მოთხოვნის გაკეთება ან მონაცემების შენახვა.

<form v-on:submit="handleSubmit">  
  <input type="text" v-model="name" />  
  <button type="submit">Submit</button>  
</form>

data() {  
  return {  
    name: ''  
  };  
},  
methods: {  
  handleSubmit(event) {  
    event.preventDefault();  
    console.log('Form submitted! Name:', this.name);  
  }  
}

 

5. keyup მოვლენა

ეს მოვლენა ამოქმედდება კლავიშის დაჭერის შემდეგ გათავისუფლებისას. ის ჩვეულებრივ გამოიყენება კლავიატურის საპასუხოდ მოქმედებების შესასრულებლად input, როგორიცაა ნივთების სიის გაფილტვრა ან ძიების ფუნქციის გააქტიურება.

<input v-model="message" v-on:keyup="handleKeyUp" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyUp() {  
    console.log('Key up event triggered!');  
  }  
}

 

6. keydown მოვლენა

ეს მოვლენა ამოქმედდება ღილაკის დაჭერისას. ის ჩვეულებრივ გამოიყენება კლავიშების კონკრეტული კომბინაციების მოსასმენად ან მოქმედებების შესასრულებლად, როცა კლავიშს დაჭერით, როგორიცაა სლაიდშოუს ნავიგაცია ან თამაშის კონტროლი.

<input v-model="message" v-on:keydown="handleKeyDown" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyDown() {  
    console.log('Key down event triggered!');  
  }  
}

 

7. mouseover მოვლენა

ეს მოვლენა ამოქმედდება, როდესაც მაუსის მაჩვენებელი გადაადგილდება ელემენტზე. ის ჩვეულებრივ გამოიყენება დამატებითი ინფორმაციის საჩვენებლად ან ვიზუალური გამოხმაურების უზრუნველსაყოფად ელემენტზე გადაადგილებისას.

<div v-on:mouseover="handleMouseOver">Hover over me</div>

methods: {  
  handleMouseOver() {  
    console.log('Mouse over event triggered!');  
  }  
}

 

8. mouseout მოვლენა

ეს მოვლენა ამოქმედდება, როდესაც მაუსის მაჩვენებელი ელემენტიდან გადადის. ის ჩვეულებრივ გამოიყენება ელემენტების დასამალად ან შესაცვლელად, როდესაც მაუსი აღარ დევს მათზე.

<div v-on:mouseout="handleMouseOut">Move mouse out</div>

methods: {  
  handleMouseOut() {  
    console.log('Mouse out event triggered!');  
  }  
}

 

9. scroll მოვლენა

ეს მოვლენა ამოქმედდება ელემენტის გადახვევისას. ის ჩვეულებრივ გამოიყენება ისეთი ფუნქციების განსახორციელებლად, როგორიცაა უსასრულო გადახვევა, შინაარსის ზარმაცი ჩატვირთვა ან პოზიციის მიხედვით UI ელემენტების განახლება scroll.

<div v-on:scroll="handleScroll">Scroll me</div>

methods: {  
  handleScroll() {  
    console.log('Scroll event triggered!');  
  }  
}

 

10. focus ღონისძიება

ეს მოვლენა ამოქმედდება ელემენტის მიღებისას focus, როგორც წესი, როდესაც მასზე დაწკაპუნება ხდება ან როდესაც მომხმარებელი მასზე ნავიგაციას კლავს კლავიატურის გამოყენებით. ის ჩვეულებრივ გამოიყენება მოქმედებების შესასრულებლად ან ვიზუალური გამოხმაურების უზრუნველსაყოფად, როდესაც რომელიმე input ელემენტი იძენს focus.

<input v-on:focus="handleFocus" />

methods: {  
  handleFocus() {  
    console.log('Input focused!');  
  }  
}

 

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