VueJS事件处理v-on用法全解

在上一节中，我们学习了VueJS指令v-bind、v-model和其它数据绑定，VueJS中的数据绑定方式可以使用v-bind、v-model，其它的还可以结合修饰符进行数据绑定。本文开始学习VueJS的事件处理，Vue里面的事件处理主要是使用v-on指令，v-on是添加到DOM元素中的属性，用于监听VueJS中的事件。
1、v-on和点击事件处理下面是使用v-on:click处理点击事件的例子

< !DOCTYPE html> < html lang="zh_CN">< head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title>VueJS时间处理< /title> < script src="http://img.readke.com/220411/091H55255-0.jpg">< /script> < /head>< body> < div id="app"> < button v-on:click="shownumber">点击< /button> < h2>计算 100 + 200 = {{total}}< /h2> < /div> < script type="text/javascript"> var app = new Vue({ el: "#app", data: { num1: 100, num2: 200, total: "" }, methods: { shownumber: function (event) { console.log(event); return this.total = this.num1 + this.num2; } }, }); < /script> < /body>< /html>

文章图片
下面的代码用于为DOM元素设置点击事件：

< button v-on:click="shownumber">点击< /button>

v-on提供一个简写，我们也可以按如下方式调用事件，使用@+事件名，如下：

< button @click="shownumber">点击< /button>

单击按钮时，调用shownumber方法，该方法将处理事件，在浏览器中显示了相应的处理，如上图所示。
现在我们继续看另外的事件mouseover，mouseout，看下面的例子：

< !DOCTYPE html> < html lang="zh_CN">< head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title>VueJS时间处理< /title> < script src="http://img.readke.com/220411/091H55255-0.jpg">< /script> < /head>< body> < div id="app"> < div v-bind:style="styleobj" v-on:mouseover="changebgcolor" v-on:mouseout="originalcolor">< /div> < /div> < script type="text/javascript"> var app = new Vue({ el: '#app', 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，并将它的背景设置为红色。在mouseover上，将颜色更改为绿色，而在mouseout上，我们将颜色更改为红色。
在鼠标悬停期间，调用方法changebgcolor，一旦将鼠标移出div，即调用方法originalcolor。
div添加两个事件(mouseover和mouseout)，如上所示，我们已经创建了一个styleobj变量对象，该变量储存div所需的样式。
以上代码正常显示如下：

文章图片
将鼠标放在div上，则会执行mouseover函数，背景变绿色，如下所示：

文章图片
2、VueJS事件修饰符Vue在v-on属性上有可用的事件修饰符，以下是可用的修饰符。
（1）.once
表示只允许事件执行一次。
.once修饰符使用语法如下：

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

注意，我们需要在使用修饰符时添加点操作符，如上面的语法所示。看下面的一个例子中如何使用.once修饰符，并理解.once修饰符的工作原理。

文章图片
在上面的例子中，我们创建了两个buttton，带有”点击一次”标签的按钮添加了.once修饰符，而另一个按钮没有任何修饰符。
clicknum和clicknum1这两个变量分别记录两个按钮的有效点击次数，当点击按钮时，两者都会递增。两个变量都初始化为0，在上面的输出中可以看到显示。点击第一个按钮时，变量clicknum增加1，在第二次单击时，数字不会增加，因为修改器阻止它执行或执行在点击按钮时不作任何操作项。在点击第二个按钮时，执行相同的操作，即变量递增，每次单击时，值都会递增并显示。
（2）.prevent
该修饰符可以阻止事件往下传递执行，只执行指定的方法就结束事件。
使用语法如下：

< a href = "http://www.srcmini.com" v-on:click.prevent = "clickme">点击< /a>

下面是.prevent修饰符的使用例子：

< div id="app"> < a href="http://www.srcmini.com" v-on:click.prevent="clickme" target="_blank" v-bind:style="styleobj">点击< /a> < /div> < script type="text/javascript"> var app = new Vue({ el: "#app", data: { clicknum: 0, clicknum1: 0, styleobj: { color: '#4CAF50', marginLeft: '20px', fontSize: '30px' } }, methods: { clickme: function () { alert("点击a标签"); } } }); < /script>

在以上的代码中，a标签添加了一个点击事件click，如果不使用v-on:click.prevent，那么点击a标签，弹出窗口，点击确定会继续打开新页面。但是使用了.prevent修饰符之后，在弹窗窗口点击确定后，不再执行打开新页面，也就是.prevent修饰符阻止了事件的向下传递执行，显示效果如下：

文章图片
其它修饰符还有.stop、.capture、.self，其中.stop阻止点击事件冒泡，.capture用于添加事件监听器时使用事件捕获模式，.self用于只当事件在该元素本身（不是子元素）触发时，触发回调。
3、使用按键修饰符监听事件VueJS提供了按键修饰符，我们可以根据这些修饰符来控制事件处理。假设我们有一个文本框，我们希望只在按下Enter键时调用该方法，我们可以通过如下方式向事件添加键修饰符来做到这一点。

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

在这里，我们希望应用事件的按键符是v-on:eventname.keyname，也可以使用其它的按键，还可以使用多个按键符，如v-on:keyup.ctrl.enter，下面是使用按键修饰符的例子：

< div id="app"> < input type="text" v-on:keyup.enter="showvalue" v-bind:style="styleobj" placeholder="输入名称" /> < h3> {{name}}< /h3> < /div> < script type="text/javascript"> var vm = new Vue({ el: '#app', data: { name: '', styleobj: { width: "30%", padding: "12px 20px", margin: "8px 0", boxSizing: "border-box" } }, methods: { showvalue: function (event) { this.name = event.target.value; } } }); < /script>

文章图片
其中其它的按键符还有：
.tab、.delete、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.alt、.shift、.meta。
4、VueJS自定义事件【VueJS事件处理v-on用法全解】父组件可以使用prop属性将数据传递给它的组件，但是，我们需要在子组件发生变化时告诉父组件，为此，我们可以使用自定义事件。父组件可以使用v-on属性监听子组件事件，下面是一个使用例子：

< div id="app"> < 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 app = new Vue({ el: '#app', data: { languageclicked: "", languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"] }, methods: { languagedisp: function (a) { this.languageclicked = a; } } }) < /script>