开发学院

您的位置：首页>教程>正文

教程正文

VueJS 事件

VueJS 事件

  v-on是添加到DOM元素的属性，用于侦听VueJS中的事件。

点击事件

例子

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

输出

event.jpg

  下面的代码用于为DOM元素分配click事件。

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

  v-on有一个简写，这意味着我们也可以将事件称为

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

  单击按钮后，它将调用方法“displaynumbers”，该方法接受事件，并且我们已经在浏览器中对其进行了整合，如上所示。

  我们现在将检查另一个事件鼠标悬停鼠标出。

例子

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

  在上面的示例中，我们创建了宽度和高度为100 px的div。它被赋予了红色背景色。鼠标悬停时，我们将颜色更改为绿色，鼠标悬停时，我们将颜色更改为红色。

  因此，在鼠标悬停期间，方法称为changebgcolor，当我们将鼠标移出div时，方法称为originalcolor。

  这样做如下：

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

Two events -鼠标悬停和鼠标移出-如上所示分配给div。我们已经创建了一个styleobj变量，并为div指定了所需的样式。使用v - bind:style="styleobj"将同一变量绑定到div

  在changebgcolor中，我们使用以下代码将颜色更改为绿色。

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

  使用stylobj变量，我们将颜色更改为绿色。

  类似地，以下代码用于将其更改回原始颜色。

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

  这是我们在浏览器中看到的。

color_red.jpg

  鼠标悬停时，颜色将变为绿色，如下屏幕截图所示。

color_green.jpg

事件修饰符

  vue在v-on属性上有可用的事件修饰符。以下是可用的修饰符？

.once

  允许事件仅执行一次。

语法

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

  我们需要在调用修饰符时添加点运算符，如上面的语法所示。让我们在一个例子中使用它，了解一下once修饰符的工作原理。

例子

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

输出

event_modifier.jpg

  在上面的例子中，我们创建了两个按钮。带有“单击一次”标签的按钮添加了“一次”修改器，而另一个按钮没有任何修改器。这是按钮的定义方式。

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

  第一个按钮调用方法“buttonclickedonce”，第二个按钮调用方法“buttonclicked”。

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

  clicknum和clicknum 1中定义了两个变量。按一下按钮时，两者都会递增。两个变量都初始化为0，显示在上面的输出中。

  单击第一个按钮时，变量clicknum将递增1。第二次单击时，数字不会增加，因为修饰符阻止它执行或执行单击按钮时分配的任何操作项。

  单击第二个按钮，执行相同的操作，即变量递增。每次单击时，值都会递增并显示。

  下面是我们在浏览器中获得的输出。

prevent.jpg

.prevent

语法

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

例子

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

输出

click_me.jpg

click_me.jpg

  如果单击clickme链接，它将在“单击锚标记”时发送警报，并在新选项卡中打开链接。

  现在这是一种正常的方式，即链接按照我们的意愿打开。如果我们不想打开链接，我们需要向事件添加一个修饰符“prevent”，如下面的代码所示。

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

  添加后，如果单击按钮，它将发送警报消息，并且不再打开链接。“prevent”修改器阻止链接打开，只执行分配给标记的方法。

例子

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

输出

message.jpg

  单击链接后，它将显示警报消息，不再打开URL。

事件键修饰符

  VueJS提供了关键修饰符，我们可以根据这些修饰符控制事件处理。考虑到我们有一个文本框，我们希望只在按Enter键时调用方法。我们可以通过向事件添加关键修饰符来完成此操作，如下所示。

语法

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

  我们要应用于事件的关键是V - on . eventname . keyname (如上所示)

  我们可以使用多个注释记号。

例子

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

输出

multiple_keynames.jpg

  在文本框中键入内容，只有按Enter键时才会显示该内容。

type_text.jpg

自定义事件

  父级可以使用prop属性将数据传递给其组件，但是，我们需要在子级组件发生更改时通知父级。为此，我们可以使用自定义事件。

父组件可以使用v - on属性侦听子组件事件。

例子

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

输出

custom_event.jpg

  上面的代码显示了父组件和子组件之间的数据传输。

  组件是使用以下代码创建的。

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

  有一个v-for属性，它将与语言数组循环。数组中有一个语言列表。我们需要将详细信息发送到子组件。数组的值存储在项和索引中。

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

  要引用数组的值，我们需要首先将其绑定到变量，然后使用props属性引用varaiable，如下所示

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);
      }
   },
});

  属性包含数组形式的项。我们也可以把指数称为

props:[‘item’, ‘index’]

  还有一个事件添加到组件中，如下所示

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

  事件的名称是showlanguage，它调用一个名为languagedisp的方法，该方法在Vue实例中定义。

  在组件中，模板定义如下

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

  创建了一个按钮。该按钮将在语言数组中使用相同数量的计数创建。单击按钮时，有一种称为displayLanguage的方法，单击的按钮项将作为参数传递给函数。现在组件需要将单击的元素发送到父组件以进行显示，具体操作如下？

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);
      }
   },
});

  方法显示语言调用this.$emit‘showlanguage,lng);

  $emit用于调用父组件方法。方法showlanguage是在具有v - on的组件上给定的事件名称

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

  我们正在传递一个参数，即单击到主父Vue实例的方法的语言名称，该方法定义如下。

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

  这里，emit触发器显示语言，而语言又从Vue实例方法调用语言显示。它将语言clicked值分配给变量language clicked，并在浏览器中显示该值，如下屏幕截图所示。

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

  下面是我们在浏览器中获得的输出。

language_displayed.jpg

捐赠

友情链接