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 ਬਟਨ ਦਬਾ ਕੇ ਜਾਂ ਇੱਕ 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 ਵਿੱਚ ਘਟਨਾਵਾਂ ਦੀਆਂ ਕੁਝ ਬੁਨਿਆਦੀ ਉਦਾਹਰਣਾਂ ਹਨ। ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਖਾਸ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।