VueJS - Eventi

v-on è l'attributo aggiunto agli elementi DOM per ascoltare gli eventi in VueJS.

Fare clic su Evento

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

Produzione

Il codice seguente viene utilizzato per assegnare un evento clic per l'elemento DOM.

<button v-on:click = "displaynumbers">Click ME</button>

C'è una scorciatoia per v-on, il che significa che possiamo anche chiamare l'evento come segue:

<button @click = "displaynumbers">Click ME</button>

Al clic del pulsante, chiamerà il metodo 'displaynumbers', che accetta l'evento e abbiamo consolato lo stesso nel browser come mostrato sopra.

Verificheremo ora un altro evento mouseover mouseout.

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor = "green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor = "red";
               }
            },
         });
      </script>
   </body>
</html>

Nell'esempio sopra, abbiamo creato un div con larghezza e altezza pari a 100px. È stato assegnato un colore di sfondo rosso. Al passaggio del mouse, cambieremo il colore in verde e al passaggio del mouse cambieremo nuovamente il colore in rosso.

Quindi, durante il passaggio del mouse, viene chiamato un metodo changebgcolor e una volta spostato il mouse fuori dal div, viene chiamato un metodo originalcolor.

Questo viene fatto come segue:

<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>

Due eventi - mouseover e mouseout - sono assegnati al div come mostrato sopra. Abbiamo creato una variabile styleobj e dato lo stile richiesto da assegnare al div. La stessa variabile è associata al div utilizzando v-bind: style = "styleobj"

In changebgcolor, stiamo cambiando il colore in verde utilizzando il codice seguente.

changebgcolor : function() {
   this.styleobj.backgroundColor = "green";
}

Usando la variabile stylobj, stiamo cambiando il colore in verde.

Allo stesso modo, il codice seguente viene utilizzato per riportarlo al colore originale.

originalcolor : function() {
   this.styleobj.backgroundColor = "red";
}

Questo è ciò che vediamo nel browser.

Quando passiamo il mouse, il colore cambierà in verde come mostrato nello screenshot seguente.

Modificatori di eventi

Vue ha modificatori di eventi disponibili sull'attributo v-on. Di seguito sono riportati i modificatori disponibili:

.una volta

Consente all'evento di essere eseguito solo una volta.

Sintassi

<button v-on:click.once = "buttonclicked">Click Once</button>

Dobbiamo aggiungere l'operatore punto durante la chiamata dei modificatori come mostrato nella sintassi sopra. Usiamolo in un esempio e comprendiamo il funzionamento del modificatore once.

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

Produzione

Nell'esempio sopra, abbiamo creato due pulsanti. Il pulsante con l'etichetta Click Once ha aggiunto il modificatore una volta e l'altro pulsante è senza alcun modificatore. Questo è il modo in cui vengono definiti i pulsanti.

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>

Il primo pulsante chiama il metodo "buttonclickedonce" e il secondo pulsante chiama il metodo "buttonclicked".

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

Ci sono due variabili definite in clicknum e clicknum1. Entrambi vengono incrementati quando si fa clic sul pulsante. Entrambe le variabili vengono inizializzate a 0 e il display viene visualizzato nell'output sopra.

Al clic del primo pulsante, la variabile numero di clic aumenta di 1. Al secondo clic, il numero non viene incrementato poiché il modificatore impedisce l'esecuzione o l'esecuzione di qualsiasi elemento di azione assegnato al clic del pulsante.

Al clic del secondo pulsante viene eseguita la stessa azione, ovvero la variabile viene incrementata. Ad ogni clic, il valore viene incrementato e visualizzato.

Di seguito è riportato l'output che otteniamo nel browser.

.impedire

Syntax

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

Se facciamo clic sul link clickme, verrà inviato un avviso quando "si fa clic sul tag di ancoraggio" e verrà aperto il collegamento https://www.google.com in una nuova scheda come mostrato nelle schermate seguenti.

Ora funziona normalmente, ovvero il collegamento si apre come vogliamo. Nel caso in cui non vogliamo che il collegamento si apra, dobbiamo aggiungere un modificatore "prevent" all'evento come mostrato nel codice seguente.

<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>

Una volta aggiunto, se clicchiamo sul pulsante, invierà un messaggio di avviso e non aprirà più il collegamento. Il modificatore prevent impedisce l'apertura del collegamento ed esegue solo il metodo assegnato al tag.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

Al clic del collegamento, verrà visualizzato il messaggio di avviso e non verrà più aperto l'URL.

Evento - Modificatori chiave

VueJS offre modificatori chiave in base ai quali possiamo controllare la gestione degli eventi. Considera di avere una casella di testo e vogliamo che il metodo venga chiamato solo quando premiamo Invio. Possiamo farlo aggiungendo modificatori chiave agli eventi come segue.

Sintassi

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

La chiave che vogliamo applicare al nostro evento è V-on.eventname.keyname (come mostrato sopra)

Possiamo utilizzare più nomi chiave. Per esempio,V-on.keyup.ctrl.enter

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

Produzione

Digita qualcosa nella casella di testo e vedremo che viene visualizzato solo quando premiamo Invio.

Eventi personalizzati

Il genitore può passare i dati al suo componente usando l'attributo prop, tuttavia, dobbiamo dire al genitore quando ci sono cambiamenti nel componente figlio. Per questo, possiamo utilizzare eventi personalizzati.

Il componente padre può ascoltare l'evento del componente figlio utilizzando v-on attributo.

Esempio

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </div>
      </div>
      <script type = "text/javascript">
         Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
               return {
                  counter: 0
               }
            },
            props:['item'],
            methods: {
               displayLanguage: function (lng) {
                  console.log(lng);
                  this.$emit('showlanguage', lng);
               }
            },
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               languageclicked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languageclicked = a;
               }
            }
         })
      </script>
   </body>
</html>

Produzione

Il codice precedente mostra il trasferimento dei dati tra il componente padre e il componente figlio.

Il componente viene creato utilizzando il codice seguente.

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

C'è un v-forattributo, che verrà eseguito in loop con l'array delle lingue. L'array contiene un elenco di lingue. Dobbiamo inviare i dettagli al componente figlio. I valori dell'array vengono memorizzati nell'elemento e nell'indice.

v-bind:item = "item"
v-bind:index = "index"

Per fare riferimento ai valori dell'array, dobbiamo prima associarlo a una variabile e il variabile viene indicato utilizzando la proprietà props come segue.

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

La proprietà props contiene l'elemento in una forma di matrice. Possiamo anche fare riferimento all'indice come:

props:[‘item’, ‘index’]

C'è anche un evento aggiunto al componente come segue:

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Il nome dell'evento è showlanguage e chiama un metodo chiamato languagedisp che è definito nell'istanza di Vue.

Nel componente, il modello è definito come segue:

template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',

C'è un pulsante creato. Il pulsante verrà creato con il numero di conteggi nell'array della lingua. Al clic del pulsante, è disponibile un metodo chiamato displayLanguage e l'elemento su cui si è fatto clic sul pulsante viene passato come parametro alla funzione. Ora il componente deve inviare l'elemento cliccato al componente genitore per la visualizzazione che viene fatto come segue:

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

Il metodo displayLanguage chiamate this.$emit(‘showlanguage’, lng);

$emitviene utilizzato per chiamare il metodo del componente padre. Il metodo showlanguage è il nome dell'evento fornito sul componente con v-on.

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

Stiamo passando un parametro, cioè il nome della lingua cliccata, al metodo dell'istanza principale di Vue che è definita come segue.

var vm = new Vue({
   el: '#databinding',
   data: {
      languageclicked: "",
      languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
   },
   methods: {
      languagedisp: function (a) {
         this.languageclicked = a;
      }
   }
})

In questo caso l'emit innesca showlanguage che a sua volta chiama languagedispdai metodi di istanza di Vue. Assegna alla variabile il valore della lingua su cui si è fatto cliclanguageclicked e lo stesso viene visualizzato nel browser come mostrato nello screenshot seguente.

<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>

Di seguito è riportato l'output che otteniamo nel browser.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved