Event Modifiers vue js 3
Event Modifires
=====================================================================================
//this is not event modifier. this is keyup event work
//html
<div id="app">
<h1>Enter your name</h1>
<input type="text" @keyup="handlekey">
<p>welcome {{name}}</p>
</div>
//js
var app = Vue.createApp({
data(){
return{
name: ""
};
},
methods: {
handlekey(e){
this.name = e.target.value
}
}
});
app.mount('#app');
//input field e ja type kora hobe setai display korbe.
..............
//this event modifier
//html
<div id="app">
<h1>Enter your name</h1>
<input type="text" @keyup.enter="handlekey">
<p>welcome {{name}}</p>
</div>
//js
var app = Vue.createApp({
data(){
return{
name: ""
};
},
methods: {
handlekey(e){
this.name = e.target.value
}
}
});
app.mount('#app');
//input box e kisu type korar pore enter press korlei then display korbe data.
........................................................................................
//form submit without reload browser. simple way not event modifier
//html
<div id="app">
<form @submit="formsubmit">
<h1>Enter your name</h1>
<input type="text" @keyup.enter="handlekey">
<p>welcome {{name}}</p>
<button type="submit">OK</button>
</form>
</div>
//js
var app = Vue.createApp({
data(){
return{
name: ""
};
},
methods: {
handlekey(e){
this.name = e.target.value
},
formsubmit(e){
console.log(e);
e.preventDefault();
}
}
});
app.mount('#app');
.....................................
//form submit without reload browser with event modifier
//html
<div id="app">
<form @submit.prevent="formsubmit">
<h1>Enter your name</h1>
<input type="text" @keyup.enter="handlekey">
<p>welcome {{name}}</p>
<button type="submit">OK</button>
</form>
</div>
//js
var app = Vue.createApp({
data(){
return{
name: ""
};
},
methods: {
handlekey(e){
this.name = e.target.value
},
formsubmit(e){
console.log(e);
}
}
});
app.mount('#app');
...............................
No comments