Vue学习笔记之事件处理
文章目录
事件的基本使用:
1、效果示例
容器root只能接收vue里的内容,所以function要放到vue实例中,放再外面,容器识别不到,会报错。
2、示例
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<button v-on:click="showInfo">点我提示信息</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false//阻止vue在启动时生成生产提示。
new Vue({
el:"#root",
data:{
name:"尚硅谷"
},
methods:{
showInfo(){
alert("同学你好!");//弹窗显示。
}
}
})
效果截图:
v-on监听DOM事件
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操作,这些操作(比如点击)触发后执行的动作;V-on的简写是@
4、示例,传参函数和不传参函数
5、 方法要放在methods中,虽然放在data中也能用,但是vue会对data中的东西进行数据代理,如果方法放在vue中,vue也会将方法进行不必要的数据代理导致开销增大。且不规范。
事件的基本使用总结:
1.使用v-on :xxx或@xxx绑定事件,其中xoxx是事件名;
2.事件的回调活配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或组件实例对象;
5.@click="demo”和@click="demo($event)”效果一致,但后者可以传参;
事件修饰符:
相关概念:
1、事件流描述的是从页面中接受事件的顺序。
2、事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。
3、事件捕获:事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
DOM事件流:
‘DOM2级事件’规定的事件流包含3个阶段,事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获为截获事件提供机会,然后是实际的目标接收事件,最后一个阶段是事件冒泡阶段,可以在这个阶段对事件做出响应。
在DOM事件流中,事件的目标在捕获阶段不会接收到事件,这意味着在捕获阶段事件从document到<p>就停止了,下个阶段是处于目标阶段,于是事件在<p>上发生,并在事件处理中被看成冒泡阶段的一部分,然后,冒泡阶段发生,事件又传播回document。
vue中的事件修饰符:
\1. prevent: 阳止默认事件(常用)
\2. stop:阻止事件冒泡(常用);
\3. once:事件只触发一次(常用):
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
以下为示例:
1、阻止默认事件:a链接默认点击跳转,但是在@click后加.prevent后,点击就不会跳转,因为跳转被阻止了。
2、阻止事件冒泡:(冒泡从里到外)
3、事件只触发一次(点击第二次会没有反应)。 4
一般事件捕获阶段是不进行事件处理的,但是加了capture后,程序从事件捕获开始进行事件处理。(很少用)
4、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
示例是滑动鼠标触发事件,但是直接用@wheel的话,鼠标滑动事件触发后,回调结果,滚动条才会动,有延迟。加上passive后就可以看到鼠标滑动的同时滚动条也相应地动。视觉效果更好,一般在移动端使用。
Passive用的少是因为直接使用@scroll效果是一样的,且更便捷。
5、先停止冒泡,再阻止默认事件。
事件处理:键盘事件
1、如果不加keyup.enter,在text框里输入数字,控制台就立马自己显示输入内容。如,想输入123,但是还没有输入完成控制台就输出了。
但加了keyup.enter之后,就可以先输入完数字然后按下回车键之后,控制台再去处理显示输出。
没有加keyup.enter的效果,加了之后是只显示你输入完数字按下回车键的结果。