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 માં ઘટનાઓના કેટલાક મૂળભૂત ઉદાહરણો છે. તમે તમારા પ્રોજેક્ટની ચોક્કસ જરૂરિયાતોને ફિટ કરવા માટે ઇવેન્ટ હેન્ડલિંગ કાર્યોને કસ્ટમાઇઝ કરી શકો છો.