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的效果，加了之后是只显示你输入完数字按下回车键的结果。
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
