Immaniġġjar ta' Avvenimenti f'Vue.js: Sintassi u Eżempji

L-immaniġġjar tal-avvenimenti huwa parti importanti mill-interazzjoni mal-utenti u l-bidla tal-istat ta 'applikazzjoni f'Vue.js. Vue.js jipprovdi diversi modi kif timmaniġġja l-avvenimenti, inklużi l-immaniġġjar tal-avvenimenti inline, metodi, u modifikaturi tal-avvenimenti.

Hawn huma xi avvenimenti komuni f'Vue.js

1. click avveniment

Dan l-avveniment jiġi attivat meta jiġi kklikkjat element li jista' jiġi kklikkjat, bħal buttuna jew link. Huwa komunement użat biex iwettaq azzjonijiet jew iqanqal funzjonijiet meta utent jinteraġixxi mal-element.

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

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

2. input avveniment

Dan l-avveniment jiġi attivat meta l-valur ta ' input element jinbidel. Huwa komunement użat mad- v-model direttiva biex jorbot il- input valur ma 'proprjetà tad-dejta fil-komponent ta' Vue. Dan jippermettilek taġġorna b'mod reattiv u ssegwi l-bidliet fil- input valur.

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

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

3. change avveniment

Dan l-avveniment jiġi attivat meta l-valur ta’ element tal-formola, bħal dropdown jew checkbox magħżul, jinbidel. Huwa komunement użat biex iwettaq azzjonijiet jew taġġorna d-dejta bbażata fuq l-għażla magħżula jew l-istat ikkontrollat ​​tal-element.

<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 avveniment

Dan l-avveniment jiġi attivat meta tiġi sottomessa formola, jew billi tikklikkja buttuna submit jew tagħfas Enter ġewwa input qasam. Huwa komunement użat biex jimmaniġġja s-sottomissjonijiet tal-formoli, jivvalida l-utent input, u jwettaq azzjonijiet bħal tagħmel talbiet għall-API jew iffrankar tad-dejta.

<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 avveniment

Dan l-avveniment jiġi attivat meta ċavetta tiġi rilaxxata wara li tiġi ppressata 'l isfel. Huwa komunement użat biex iwettaq azzjonijiet bi tweġiba għat-tastiera input, bħall-iffiltrar ta 'lista ta' oġġetti jew li tiskatta funzjonalità ta 'tfittxija.

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

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

6. keydown avveniment

Dan l-avveniment jiġi attivat meta ċavetta tiġi ppressata 'l isfel. Huwa komunement użat biex jisma' għal kombinazzjonijiet ta 'ċwievet speċifiċi jew iwettaq azzjonijiet waqt li ċavetta tinżamm 'l isfel, bħan-navigazzjoni permezz ta' preżentazzjoni jew il-kontroll ta 'logħba.

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

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

7. mouseover avveniment

Dan l-avveniment jiġi attivat meta l-pointer tal-maws jitmexxa fuq element. Huwa komunement użat biex juri informazzjoni addizzjonali jew jipprovdi feedback viżwali meta tgħaddi fuq element.

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

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

8. mouseout avveniment

Dan l-avveniment jiġi attivat meta l-pointer tal-maws jitmexxa 'l barra minn element. Huwa komunement użat biex jaħbi jew jimmodifika elementi meta l-maws ma jibqax idawwar fuqhom.

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

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

9. scroll avveniment

Dan l-avveniment jiġi attivat meta element jiġi skrolljat. Huwa komunement użat biex jimplimenta karatteristiċi bħal scrolling infinit, tagħbija għażżien tal-kontenut, jew aġġornament ta 'elementi UI bbażati fuq il- scroll pożizzjoni.

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

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

10. focus avveniment

Dan l-avveniment jiġi attivat meta element jirċievi focus, tipikament meta jiġi kklikkjat jew meta l-utent jinnaviga lejh billi juża t-tastiera. Huwa komunement użat biex iwettaq azzjonijiet jew jipprovdi feedback viżwali meta gwadann input jew element focus.

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

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

Dawn huma biss xi eżempji bażiċi ta’ avvenimenti f’Vue.js. Tista' tippersonalizza l-funzjonijiet tal-immaniġġjar tal-avvenimenti biex taqdi l-ħtiġijiet speċifiċi tal-proġett tiegħek.