当前位置：首页 > news >正文

【第六节】方法与事件处理器

news 2025/7/29 11:12:32

方法与事件处理器

方法处理器

可以用 v-on 指令监听 DOM 事件:

<div id="example">
<button v-on:click="greet">Greet</button></div>

绑定一个单击事件处理器到一个方法 greet 。下面在 Vue 实例中定义这个方法

var vm=new Vue({el:'#example',data:{
name:'Vue.js'
//在'methods’对象中定义方法
methods:{greet:function(event)(//方法内'this”指向 
vmalert('Hello+ this.name +'!')
//“event'是原生DOM事件
alert(event.target.tagName)
//也可以在 JavaScript 代码中调用方法
vm.greet()
//'Hello Vue.js!

在这里插入图片描述

内联语句处理器

除了直接绑定到一个方法，也可以用内联 JavaScript 语句:（方法传参）

<div id="example-2">
<button v-on:click="say('hi')">Say Hi</button><button v-on:click="say('what')">Say What</button></div>
new Vue( {el:'#example-2',methods:{say:function(msg){alert(msg)}}})

在这里插入图片描述

类似于内联表达式，事件处理器限制为一个语句。有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量Sevent 把它传入方法:
HTML

<button v-on:click="say('hello!'$event)">Submit</button>

methods:{
say:function(msg,event){
//现在可以访问原生事件对象event.preventDefault()
}
}

在这里插入图片描述

event.stopPropagation()
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
语法

event.stopPropagation()

说明
该方法将停止事件的传播，阻止它被分派到其他Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

preventDefalt()方法

取消事件的默认动作。
语法

event.preventDefault()

说明
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如，如果 type 属性是"submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果vent 对象的 cancelable 属性是fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

JS事件捕获与事件冒泡

avaScript 事件分为三个阶段：

捕获阶段：事件从父元素开始向目标元素传播，从 Window 对象开始传播。
目标阶段：该事件到达目标元素或开始该事件的元素。
冒泡阶段：这时与捕获阶段相反，事件向父元素传播，直到 Window 对象。

参考博客

事件修饰符

在事件处理器中经常需要调用 event.preventDefault()或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。
为了解决这个问题，Vue.js为v-on 提供两个事件修饰符:.prevent与 .stop 。

<!--阻止单击事件冒泡-->
<a v-on:click.stop="doThis"></a>
<!--提交事件不再重载页面-->
sform v-on:submit.prevent="onSubmit"></form>
s修饰符可以串联--
<a v-on:click.stop.prevent="doThat">
<!--只有修饰符-->
<form von:submit.prevent></form>

1.0.16 添加了两个额外的修饰符

<!--添加事件侦听器时使用capture模式--><div v-on:click.capture "doThis">...</div>

按键修饰符

在监听键盘事件时，我们经常需要检测 keyCode。Vue.js允许为 v-on 添加按键修饰符
HTML

<!--只有在keyCode是13时调用vm.submit()--><input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名:
HTML

<!--同上-->
<input v-on:keyup.enter="submit">
<!--缩写语法 --><input @keyup.enter="submit">

在这里插入图片描述

key列表
key对应
在这里插入图片描述

为什么在html中监听事件

这种事件监听的方式违背了传统理念“separation ofconcern”。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel上，它不会导致任何维护困难。实际上，使用v-on有几个好处:
1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2.无须在 JavaScript 里手动绑定事件， ViewModel代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。无须担心如何自己清理它们。

查看全文

http://www.dtcms.com/a/300519.html