VueJS - Events-alljchome-开发者的教程家园

VueJS Tutorial

VueJS Useful Resources

Selected Reading

VueJS - Events

v-on is the attribute added to the DOM elements to psten to the events in VueJS.

Cpck Event

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <span id = "databinding">
         <button v-on:cpck = "displaynumbers">Cpck ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </span>
      <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>

Output

The following code is used to assign a cpck event for the DOM element.

<button v-on:cpck = "displaynumbers">Cpck ME</button>

There is a shorthand for v-on, which means we can also call the event as follows −

<button @cpck = "displaynumbers">Cpck ME</button>

On the cpck of the button, it will call the method ‘displaynumbers’, which takes in the event and we have consoled the same in the browser as shown above.

We will now check one more event mouseover mouseout.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <span id = "databinding">
         <span v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></span>
      </span>
      <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>

In the above example, we have created a span with width and height as 100px. It has been given a background color red. On mouseover, we are changing the color to green, and on mouseout we are changing the color back to red.

Hence, during mouseover, a method is called changebgcolor and once we move the mouse out of the span, a method is called originalcolor.

This is done as follows −

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

Two events - mouseover and mouseout - is assigned to the span as shown above. We have created a styleobj variable and given the required style to be assigned to the span. The same variable is binded to the span using v-bind:style = ”styleobj”

In changebgcolor, we are changing the color to green using the following code.

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

Using the stylobj variable, we are changing the color to green.

Similarly, the following code is used to change it back to the original color.

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

This is what we see in the browser.

When we mouseover, the color will change to green as shown in the following screenshot.

Event Modifiers

Vue has event modifiers available on v-on attribute. Following are the modifiers available −

.once

Allows the event to execute only once.

Syntax

<button v-on:cpck.once = "buttoncpcked">Cpck Once</button>

We need to add dot operator while calpng the modifiers as shown in the syntax above. Let us use it in an example and understand the working of the once modifier.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <span id = "databinding">
         <button v-on:cpck.once = "buttoncpckedonce" v-bind:style = "styleobj">Cpck Once</button>
         Output:{{cpcknum}}
         <br/><br/>
         <button v-on:cpck = "buttoncpcked"  v-bind:style = "styleobj">Cpck Me</button>
         Output:{{cpcknum1}}
      </span>
      <script type = "text/javascript">
         var vm = new Vue({
            el:  #databinding ,
            data: {
               cpcknum : 0,
               cpcknum1 :0,
               styleobj: {
                  backgroundColor:  #2196F3!important ,
                  cursor:  pointer ,
                  padding:  8px 16px ,
                  verticalApgn:  middle ,
               }
            },
            methods : {
               buttoncpckedonce : function() {
                  this.cpcknum++;
               },
               buttoncpcked : function() {
                  this.cpcknum1++;
               }
            }
         });
      </script>
   </body>
</html>

Output

In the above example, we have created two butttons. The button with Cpck Once label has added the once modifier and the other button is without any modifier. This is the way the buttons are defined.

<button v-on:cpck.once = "buttoncpckedonce" v-bind:style = "styleobj">Cpck Once</button>
<button v-on:cpck = "buttoncpcked"  v-bind:style = "styleobj">Cpck Me</button>

The first button calls the method “buttoncpckedonce” and the second button calls the method “buttoncpcked”.

buttoncpckedonce : function() {
   this.cpcknum++;
},
buttoncpcked : function() {
   this.cpcknum1++;
}

There are two variables defined in the cpcknum and cpcknum1. Both are incremented when the button is cpcked. Both the variables are initiapzed to 0 and the display is seen in the output above.

On the cpck of the first button, the variable cpcknum increments by 1. On the second cpck, the number is not incremented as the modifier prevents it from executing or performing any action item assigned on the cpck of the button.

On the cpck of the second button, the same action is carried out, i.e. the variable is incremented. On every cpck, the value is incremented and displayed.

Following is the output we get in the browser.

.prevent

Syntax

<a href = "http://www.google.com" v-on:cpck.prevent = "cpckme">Cpck Me</a>

Example

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

Output

If we cpck the cpckme pnk, it will send an alert as “Anchor tag is cpcked” and it will open the pnk https://www.google.com in a new tab as shown in the following screenshots.

Tag Opened

Now this works as a normal way, i.e. the pnk opens up as we want. In case we don’t want the pnk to open up, we need to add a modifier ‘prevent’ to the event as shown in the following code.

<a href = "http://www.google.com" v-on:cpck.prevent = "cpckme" target = "_blank" v-bind:style = "styleobj">Cpck Me</a>

Once added, if we cpck on the button, it will send an alert message and will not open the pnk anymore. The prevent modifier prevents the pnk from opening and only executes the method assigned to the tag.

Example

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

Output

On the cpck of the pnk, it will display the alert message and does not open the url anymore.

Event - Key Modifiers

VueJS offers key modifiers based on which we can control the event handpng. Consider we have a textbox and we want the method to be called only when we press Enter. We can do so by adding key modifiers to the events as follows.

Syntax

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

The key that we want to apply to our event is V-on.eventname.keyname (as shown above)

We can make use of multiple keynames. For example, V-on.keyup.ctrl.enter

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <span id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </span>
      <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>

Output

Type something in the textbox and we will see it is displayed only when we press Enter.

Custom Events

Parent can pass data to its component using the prop attribute, however, we need to tell the parent when there are changes in the child component. For this, we can use custom events.

The parent component can psten to the child component event using v-on attribute.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <span id = "databinding">
         <span id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languagecpcked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </span>
      </span>
      <script type = "text/javascript">
         Vue.component( button-counter , {
            template:  <button v-on:cpck = "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: {
               languagecpcked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languagecpcked = a;
               }
            }
         })
      </script>
   </body>
</html>

Output

The above code shows the data transfer between the parent component and the child component.

The component is created using the following code.

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

There is a v-for attribute, which will loop with the languages array. The array has a pst of languages in it. We need to send the details to the child component. The values of the array are stored in the item and the index.

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

To refer to the values of the array, we need to bind it first to a variable and the varaiable is referred using props property as follows.

Vue.component( button-counter , {
   template:  <button v-on:cpck = "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);
      }
   },
});

The props property contains the item in an array form. We can also refer to the index as −

props:[‘item’, ‘index’]

There is also an event added to the component as follows −

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

The name of the event is showlanguage and it calls a method called languagedisp which is defined in the Vue instance.

In the component, the template is defined as follows −

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

There is a button created. The button will get created with as many count in the language array. On the cpck of the button, there is a method called displayLanguage and the button cpcked item is passed as a param to the function. Now the component needs to send the cpcked element to the parent component for display which is done as follows −

Vue.component( button-counter , {
   template:  <button v-on:cpck = "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);
      }
   },
});

The method displayLanguage calls this.$emit(‘showlanguage’, lng);

$emit is used to call the parent component method. The method showlanguage is the event name given on the component with v-on.

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

We are passing a parameter, i.e. the name of the language cpcked to the method of the main parent Vue instance which is defined as follows.

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

Here, the emit triggers showlanguage which in turn calls languagedisp from the Vue instance methods. It assigns the language cpcked value to the variable languagecpcked and the same is displayed in the browser as shown in the following screenshot.

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

Following is the output we get in the browser.

VueJS - Events

Cpck Event

Example

Output

Example

Event Modifiers

.once

Syntax

Example

Output

.prevent

Event - Key Modifiers

Syntax

Example

Output

Custom Events

Example

Output

友情链接