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 واقعہ

یہ واقعہ اس وقت شروع ہوتا ہے جب کسی عنصر کو اسکرول کیا جاتا ہے۔ scroll یہ عام طور پر لامحدود سکرولنگ، مواد کی سست لوڈنگ، یا پوزیشن کی بنیاد پر UI عناصر کو اپ ڈیٹ کرنے جیسی خصوصیات کو نافذ کرنے کے لیے استعمال کیا جاتا ہے۔

<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 میں واقعات کی کچھ بنیادی مثالیں ہیں۔ آپ اپنے پروجیکٹ کی مخصوص ضروریات کو پورا کرنے کے لیے ایونٹ ہینڈلنگ کے افعال کو اپنی مرضی کے مطابق بنا سکتے ہیں۔