Vue事件处理

image.png

三种方式

        <button @click="handleClick1()">click1-通过函数调用</button>
        <button @click="handleClick2">click2-通过函数名</button>
        <button @click=" count++ ">click3-通过表达式</button>

不加括号能获取事件源

<input type="text" @input="handleInput">
        <div>{{ text }}</div>
        <!-- 不加括号会传将事件对象 -->

 handleInput(ev) {
                    // 获取事件源 ev.target
                    // 获取事件值 ev.target.value
                    this.text = ev.target.value 
                }

image.png

即想传参又想传事件对象

<input type="text" @input="handleInput($event, 'fbb')">
加上$说明不是随随便便的参数 是把事件对象传出来

事件修饰符

事件冒泡

        <ul @click="handleUlClick">
            <li @click="handleLiClick">11111</li>
            <li @click="handleLiClick">11111</li>
            <li @click="handleLiClick">11111</li>
        </ul>
    <script>
                handleUlClick() {
                    console.log("ul-父级触发")
                },
                handleLiClick() {
                    console.log("li-子级触发")
                }

    </script>

冒泡触发

阻止冒泡

方法一. ev.stopPropagation() //阻止冒泡
方法二. <li @click.stop="handleLiClick">11111</li>
<ul @click.self="handleUlClick">
stop 和 self Vue提供的事件修饰符

查看》Vue提供的事件修饰符

例如：

 <a href="http://www.baidu.com" @click.prevent="handleAClick"> 跳转页面 </a>
        <!-- @click.prevent 阻止默认行为 a标签的跳转 -->
 
 <button  @click.once="handleBtnClick">点击</button>
        <!-- @click.once点完一次立即解绑 -->

按键修饰符

 <P>回车提交<input type="text" v-model="myText" @keydown.enter="handleKeyDown"></P>
 --@keydown.enter 点击回车触发函数
 ---可以根据键值触发函数
----@keydown.87 是 w 
----等等。。。