当前位置：慕源网 > VueJS – 事件（监听 VueJS 中的事件）10

VueJS – 事件（监听 VueJS 中的事件）10

作者 : 慕源网 本文共8423个字，预计阅读时间需要22分钟 发布时间： 2021-11-17 共437人阅读

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>

输出

以下代码用于为 DOM 元素分配点击事件。

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

v-on 有一个简写，这意味着我们也可以按如下方式调用事件 –

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

单击按钮时，它将调用方法“displaynumbers”，该方法接收事件，并且我们已在浏览器中对其进行了控制台，如上所示。

我们现在将检查另一个事件 mouseover mouseout。

例子

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

在上面的例子中，我们创建了一个宽度和高度为 100px 的 div。它的背景颜色是红色。在鼠标悬停时，我们将颜色更改为绿色，而在鼠标悬停时，我们将颜色更改回红色。

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

这是按如下方式完成的 –

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

两个事件 – mouseover 和 mouseout – 分配给 div，如上所示。我们已经创建了一个 styleobj 变量，并给出了要分配给 div 的所需样式。使用 v-bind:style = ”styleobj” 将相同的变量绑定到 div

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

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

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

同样，下面的代码用于将其改回原来的颜色。

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

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

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

事件修饰符

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>

输出

在上面的例子中，我们创建了两个按钮。带有 Click Once 标签的按钮添加了一次修饰符，而另一个按钮没有任何修饰符。这就是按钮的定义方式。

<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和clicknum1中定义了两个变量。单击按钮时，两者都会增加。这两个变量都被初始化为 0，并且显示在上面的输出中。

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

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

以下是我们在浏览器中得到的输出。

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

输出

如果我们点击 clickme 链接，它会发送一个警告“锚标签被点击”，它会在新标签中打开链接https://www.google.com，如下面的屏幕截图所示。

现在这可以正常工作，即链接会根据我们的需要打开。如果我们不想打开链接，我们需要向事件添加修饰符“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>

输出

单击链接时，它将显示警报消息，并且不再打开 url。

Event – Key 修饰符

VueJS 提供了关键修饰符，我们可以基于这些修饰符来控制事件处理。考虑我们有一个文本框，并且我们希望该方法仅在我们按下 Enter 键时被调用。我们可以通过向事件添加键修饰符来做到这一点，如下所示。

语法

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

我们要应用到我们的事件的键是V-on.eventname.keyname（如上图所示）

我们可以使用多个键名。例如，V-on.keyup.ctrl.enter

例子

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

输出

在文本框中输入一些内容，我们会看到它只有在我们按下 Enter 键时才会显示。

自定义事件

父组件可以使用 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>

输出

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

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

<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 属性引用该变量，如下所示。

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 属性包含数组形式的项目。我们也可以将索引称为 –

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，它调用了一个在 Vue 实例中定义的名为languagedisp的方法。

在组件中，模板定义如下 –

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

displayLanguage方法调用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 触发 showlanguage，后者又从 Vue 实例方法调用languagedisp。它将点击的语言值分配给变量languageclicked ，并在浏览器中显示相同的内容，如下面的屏幕截图所示。

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

以下是我们在浏览器中得到的输出。


慕源网 » VueJS – 事件（监听 VueJS 中的事件）10

常见问题FAQ

程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
慕源网

慕源网 普通

分享到：

发表评论

相关推荐

开通VIP 享更多特权，建议使用QQ登录
账号登录/注册
QQ登录
微博登录