vuejs教程：v-on添加到DOM元素监听VueJS中事件的属性

2018-09-2916:18:20WEB前端开发Comments2,008 views字数 7973阅读模式

v-on是添加到DOM元素以监听VueJS中的事件的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

点击事件

创建一个文件：event-click.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs事件示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">点击计算结果</button>
         <h2> 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>

在浏览器中查看，如下所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

以下代码用于为DOM元素分配一个单击事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<button v-on:click = "displaynumbers">点击计算结果</button>

有一个v-on的简写，这意味着也可以按如下方式调用事件 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<button @click = "displaynumbers">点击计算结果</button>

点击按钮，它将调用方法displaynumbers，它将接受事件，已经在浏览器中同样如上所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

我们现在来看看一个事件鼠标悬停鼠标效果。参考以下代码(event-click2.html) -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

在上面的例子中，创建了一个宽度和高度均为100px的div。它被赋予了红色的背景颜色。在鼠标悬停时，将颜色更改为绿色，在鼠标悬停时，又将颜色更改为红色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

因此，在鼠标悬停期间，调用changebgcolor方法，将鼠标移出div时，调用一个方法：originalcolor。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

这是如下完成的 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

如上所示，将两个事件(mouseover和mouseout)分配给div。已经创建了一个styleobj变量，并给定了要分配给div的所需样式。使用v-bind将相同的变量绑定到：div：style ="styleobj"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

在changebgcolor中，使用以下代码将颜色更改为绿色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

使用stylobj变量，将颜色更改为绿色。同样，下面的代码用于将其更改回原始颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

在浏览器中看到如下效果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

事件修饰符

VueJS在v-on属性上有一些事件修饰符。以下是可用的修改器 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

1. 修饰符 .once

允许该事件只执行一次。语法如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<button v-on:click.once = "buttonclicked">点击一次</button>

在下面示例中，实现在调用修饰符的同时添加点运算符，并理解一次修饰符的工作。创建一个文件：event-modifiers.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs事件示例</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">点击一次</button>
         输出结果: {{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">点击我</button>
         输出结果: {{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>

在浏览器中浏览看到如下效果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

在上面的例子中，我们创建了两个按钮。点击一次标签的按钮添加了once修饰符，另一个按钮没有任何修饰符。这是按钮的定义方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">点击一次</button>
         输出结果: {{clicknum}}
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">点击我</button>

第一个按钮调用方法buttonclickedonce，第二个按钮调用方法buttonclicked。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

定义了两个变量：clicknum和clicknum1。当按钮被点击时，两者都增加。两个变量都初始化为0，显示在上面的输出中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

点击第一个按钮时，变量clicknum加1。第二次点击时，数字不会递增，因为once修饰符阻止它执行或执行任何按钮单击指定的操作项目。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

在点击第二个按钮时，执行相同的动作，即变量增加。在每次点击时，值都会递增并显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

以下是在浏览器中获得的输出 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

2. 修饰符 .prevent

语法 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

创建一个文件：event-modifiers2.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs事件示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.yiibai.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">点击我</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("锚点标签被点击了~");
               }
            }
         });
      </script>
   </body>
</html>

如果点击"点击我"的链接，它将会发送一个警示为："锚点标签被点击了~"，它会在一个新的选项卡中打开链接 - http://www.yiibai.com ，如以下屏幕截图所示。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

这是一个正常的方式，即打开链接的网站。如果不希望链接打开，可添加一个修饰符“阻止”到这个事件，如下面的代码所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

当添加，如果点击按钮，它会发送一个警告消息，不会再打开链接。阻止修饰符防止链接打开，只执行分配给标签的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

创建一个文件：event-modifiers3.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs事件示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.yiibai.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">点击我</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("锚点标签被点击了~");
               }
            }
         });
      </script>
   </body>
</html>

以下是在浏览器中获得的输出 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

事件 - 键修饰符

VueJS提供了可以控制事件处理的按键修饰符。考虑如果有一个文本框，我们希望只有当按Enter 键时才会调用这个方法。那么可以通过向事件添加键修饰符来完成，如下所示。
语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

想要应用于事件的键是：v-on.eventname.keyname(如上代码所示)，也可以使用多个键。例如，v-on.keyup.ctrl.enter，参考以下代码(event-key-modifiers.html)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs事件示例</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 = "请输入名字，完成后回车~"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "50%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

在浏览器中，输入一个名字：Maxsu，然后按回车键，效果如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

自定义事件

父组件可以使用prop属性将数据传递给其组件，但是，当子组件发生更改时，需要告诉父项。为此，可以使用自定义事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

父组件可以使用v-on属性来侦听子组件事件。创建一个文件：event-custom.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<html>
   <head>
   <meta charset="UTF-8">
      <title>VueJs自定义事件</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;">语言显示 : <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>

以下是在浏览器中获得的输出 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

上面的代码显示了父组件和子组件之间的数据传输。该组件是使用以下代码创建的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.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属性，它将与语言数组一起循环。该数组中有一个语言列表。需要将详细信息发送给子组件。数组的值存储在项目和索引中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

为了引用数组的值，需要先将它绑定到一个变量，然后使用props属性来引用变量，如下所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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属性以数组形式包含项目。也可以参考索引 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

props:[‘item’, ‘index’]

还有一个事件添加到组件如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

<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的方法。
在组件中，模板定义如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

有一个按钮创建。该按钮将在语言数组中使用尽可能多的计数创建。点击按钮，有一个叫做displayLanguage的方法，按钮被点击的项目作为参数传递给函数。现在，组件需要将clicked元素发送到父组件以进行显示，具体步骤如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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在组件上给出的事件名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

正在传递一个参数，即被点击到主Vue实例的方法的语言名称，定义如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

在这里，发出触发器showlanguage，然后调用Vue实例方法中的languagedisp。它将语言点击值赋给变量languageclicked，并在浏览器中显示相同的内容。如下所示 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5984.html

vuejs教程：v-on添加到DOM元素监听VueJS中事件的属性

点击事件

事件修饰符

1. 修饰符 .once

2. 修饰符 .prevent

事件 - 键修饰符

自定义事件

编写异步 JavaScript 的 10 个最佳实践

搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Comment