vue.js事件管理器是什么样

2019-08-15 01:20栏目:技术创新

监听事件

能够用v-on指令监听DOM事件来触发一些javascript代码。

demo:

<div v-on:click="  counter">点击,增加1</div>
{{counter}}



 data:{

  counter:0

}

方式事件处理器

有的是事件管理器的逻辑都很复杂,所以直接把javaScript代码写在v-on指令中是不可行的。因而v-on能够选用三个概念的法门来调用

<div v-on:click="counter()">点击,增加1</div>
{{counter}}



data:{

  counter:0

},

method:{

  counter:function(){

  this.counter  ;

  }

}

神跡也需求在内联语句管理器中访谈原生DOM事件,能够用特有变量$event把它传到方法:

$event 原惹事件指标

事件修饰符
在事件管理程序中调用event.preventDefault()或event.stopPropagagation()是老大普及的必要。即便大家得以在methods中轻便完结这一点,但越来越好的

格局是:methods只是纯粹的数量逻辑,并非去管理DOM事件的内幕。

为了消除这几个标题,Vue.js为v-on提供了平地风波修饰符,通过由(.)表示的一声令下后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once 

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

新增

<!--点击事件将只会触发一次-->
<a v-on:click.once="dothis"></a>

不像其他只好对原生的DOM事件起效率的修饰符,.once修饰符还能够被用到自定义的零件事件上

按钮修饰符
在监听键盘事件时,大家常常必要监听常见的键值。  Vue允许为v-on在监听事件时增进开关修饰符:

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

常见的按钮还会有外号:

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

方方面面包车型大巴按钮别称:

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

能够透过全局config.keyCodes对象 自定义案件修饰符别名

//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1=112

开关修饰符  新扩展

可以用如下修饰符开启鼠标或键盘事件监听,使在按钮按下时发生影响。

.ctrl

.alt

.shift

.meta 

只顾:在分歧系统的键盘上,meta对应的键不雷同

干什么在HTML中监听事件
您或者注意到这种事件监听的方法违背了关心点分离的历史观察法。不必忧虑,因为全部的Vue.js事件管理方法和表明式都严刻绑定在当前视图的ViewModel上,它不会产生别的保险上的不便。实际上,使用v-on有多少个低价:

1 扫一眼HTML模板便能轻轻易松定位在JavaScript代码里对应的不二诀窍

2 因为你不用在JavaScript里手动绑定事件,你的viewModel代码能够是那几个纯粹的逻辑,和DOM完全解耦,更便于测量检验。

3 当一个ViewModel被灭绝时,全数的风云管理器都会自行被删除,你不用顾虑怎么样团结清理它们。

 以上正是本文的全部内容,希望对大家的学习抱有帮助,也希望大家多多援救脚本之家。

您恐怕感兴趣的稿子:

  • 详解vue.js的事件处理器v-on:click
  • 详解Vue 方法与事件管理器
  • Vue.js事件管理器与表单控件绑定详解
  • Vue方法与事件管理器详解
  • Vue.js每一日必学之方法与事件管理器
  • VueJS事件管理器v-on的运用方法

版权声明:本文由新浦京娱乐站_新浦京娱乐场官网_新浦京娱乐发布于技术创新,转载请注明出处:vue.js事件管理器是什么样