事件处理

js中button按钮点击触发函数写法： <button onclick="函数名()">xxx</button>

Vue中button按钮点击触发函数写法： <button v-on:click="函数名">xxx</button> 也可以简写为： <button @click="函数名">xxx</button>

tip: js写法的函数名后面是有括号的，有无参数都写括号；而vue中无参数可以不写括号（默认会传一个事件对象$event），如果有一个参数以上，则要把参数写入括号，如果要用到事件对象，必须自己在括号的参数中写上 $event，

html标签中标签中方法参数 $event 可以接收事件对象，js方法中参数event就是前面的$event

vue中方法的js代码：在这里插入图片描述 注：Vue中的methods:{ 这里面的函数不要写箭头函数 }

methods中的方法的this都是指向Vue实例对象，或组件实例对象

事件修饰符

@click.prevent

@click.prevent="函数名" 中.prevent 可以阻止默认事件，如a标签的超链接跳转

.prevent在js中的写法是在函数中 event.preventDefault()

@click.stop

@click.stop="函数名" 可以阻止事件冒泡，如多层嵌套的相同点击事件

.stop 在js 中写法： event.stopPropagation()

@click.once

@click.once="函数名" 让函数只执行一次，再次点击后都不会执行了

js 点击一个多层的div会先捕获，再冒泡，执行点击函数，所以从最外层捕获到最内层，再由最内层冒泡到最外层。

@click.capture

如果在外层加@click.capture 会最先冒泡

<!-- 默认情况 -->
<div class="demo1"  @click="capture1"><!-- 先捕获 最后冒泡-->
    <div class="demo2"  @click="capture2"><!-- 再捕获 再冒泡-->
        <button @click="capture3">捕获冒泡</button><!-- 最后捕获 先冒泡-->
    </div>
</div>
<!-- 加了.capture -->
<div class="demo1"  @click.capture="capture1"><!-- 最先冒泡-->
    <div class="demo2"  @click.capture="capture2"><!-- 最后冒泡-->
        <button @click="capture3">捕获冒泡</button><!-- 第二冒泡-->
    </div>
</div>

.stop.prevent等等修饰符都可以连着写。

键盘事件（@keyup、@keydown）

input标签中 @keyup="函数名" 键盘按钮按下弹起后触发事件，@keydown 则是按下触发。

如果是@keyup.enter 则是按回车弹起才触发事件

还有

.delete（包含退格键和delete键）
.esc .up .down .left .right
.space空格

Tab按键的使用要用 @keydown.tab才有效（如果是@keyup则会跳到输入框外，失去了输入框的焦点；同样要使用keydown的还有 ctrl shift alt meta（windows的win键、苹果中的command））（所以这些都不能用keyup）

还可以 @keyup/@keydown.ctrl.y ="函数名" 连着按ctrl和y两个按键才能触发，因为@keyup/@keydown.ctrl="函数名"只按ctrl是无效的

自定义键名（了解）

Vue.config.keyCodes.xxx = ASCIl码

@keydown/@keyup.xxx = "函数名"

这样就可以使用ASCII码对应的按键的别名

【Vue2】事件处理（点击、按键）

事件处理

事件修饰符

键盘事件（@keyup、@keydown）