Vue.js中的v-on(事件处理)

Vue.js的事件处理

倾听事件

我们可以使用v-on指令来监控DOM事件，从而触发一些JavaScript代码。

Div class=' box ' { { msg } }输入类型=' button '值=' button ' v-: click=' msg=1 '/div var VM=new vue({ El 3360 })。box '，data: {msg33601}，})

方法事件处理程序

很多事件处理逻辑比较复杂，直接在v-on指令中编写JavaScript代码是不可行的。因此，v-on可以接收一个已定义的方法来调用。

Div class=' box ' { { msg } }输入类型=' button '值=' button ' v-: click=' Jia '/div var VM=new vue({ El : })。box”、data: {msg33601}、//在“methods”对象中定义方法methods : { Jia : function(event){ console . log(event)} }

鼠标事件{可信：真，screenx : 18，screeny : 107，clientx : 18，clienty : 17，…}内联处理器方法

Div class=' box ' { { msg } }输入类型=' button '值=' button ' v-: click=' Jia(' my day ')'//div var VM=new vue({ El : })。box '，data : { msg 33601)Methods : { Jia : function(x){ console。log (x)}}})

我的一天

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的要求。虽然我们可以很容易地在方法中实现这一点，但更好的方法是方法只具有纯数据逻辑，而不是处理DOM事件细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符由点()表示的指令后缀调用。).停下来。预防。捕捉。自我。一次！-防止点击事件冒泡-a v-: click。停下来！-提交事件不再重载页面-表单v-: submit . prevent=' on submit '/表单！-修饰符可以串联-a v-: click。停下来。防止='那样做'/a！-仅修饰符-表单v-on:submit.prevent/form!-添加事件侦听器时使用事件捕获模式-div v-: click。capture=' dothis './div！-只有在元素本身上触发事件时才会触发回调(例如，它不是子元素)-div v-: click。self='做那件事'./当div使用修饰符时，顺序非常重要；相应的代码以相同的顺序生成。因此，使用@click.prevent.self将阻止所有点击，而@click.self.prevent将只阻止对元素的点击。

！-click事件只会触发一次-av-: click。与其他只能处理本机DOM事件的修饰符不同。once修饰符也可以用于自定义组件事件。如果您还没有阅读关于组件的文档，现在不要担心。

键修饰符

在监控键盘事件时，我们经常需要监控常用键值。Vue允许v-on在聆听键盘事件时添加按键修饰符：

Div id=' ar5 '输入类型=' button '值=' a ' v-: key down=' a '/div var VM=new vue({ El : ' # ar5 '，data: {msg33601}，methods: {a: function)

结果

很难记住所有的键码，因此Vue为最常用的键提供了别名：进入。选项卡。删除(捕捉“删除”和“退格”键)。当然，如果您需要其他键，vue.js还为您提供了可以通过全局config.keyCodes对象自定义的键修饰符别名：

//可以使用修饰符v-: keyup . f1 vue . config . key codes . f1=112。

您可以使用以下修饰符打开鼠标或键盘事件监视，以便在按键时发生响应。

. ctrl.alt.shift.meta注意：在Mac系统键盘上，meta对应的是命令键()。在windows系统键盘元上，对应Windows徽标键()。在Sun操作系统键盘上，meta对应于实心宝石键()。在其他特定的键盘上，尤其是MIT和Lisp键盘及其后继者，如Knight键盘和space-cadet键盘上，meta被标记为“META”。在Symbolics键盘上，Meta标记为“meta”或“META”。

例如：

！-Alt C-input @ key up . Alt . 67=' clear '！-ctrlclick-div @ click。ctrl=' do某物' do某物/div修饰键不同于普通键；当修饰键与向上键事件一起使用时，当事件被引发时，必须按下正常键。换句话说：如果你想提高keyup.ctrl，按ctrl时必须释放其他键；仅仅释放ctrl并不会引发事件。

鼠标按钮修改器

这些修饰符限制处理程序监听特定的鼠标按钮

为什么.左.右.中听HTML中的事件

您可能会注意到，这种事件监控方式违反了关注点分离的传统概念。不用担心，因为所有的Vue.js事件处理方法和表达式都严格绑定到当前视图的ViewModel，不会造成任何维护困难。实际上，使用v-on有几个优点：

通过浏览HTML模板，可以很容易地在JavaScript代码中找到相应的方法。因为您不需要在JavaScript中手动绑定事件，所以您的ViewModel代码可以是非常纯的逻辑，与DOM完全解耦，并且更容易测试。当视图模型被销毁时，所有事件处理程序都会被自动删除。你不必担心如何自己清洗它们。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。