3.Vue事件处理

事件的基本使用

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，比如click；

<button v-on:click="demo">btn</button>

或者

<button @click="demo">btn</button>

2.事件的回调需要配置在methods对象中，最终会在vm上；

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
        },
        methods:{
            demo(event){
                console.log(event);
            }
        }
    })
</script>

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.传参的写法
(1)

<button v-on:click="demo(a,b,c)">btn</button>

(2)如果想要在函数中获取event对象，则这么写:

<button v-on:click="demo($event,a,b,c)">btn</button>

对应的函数写法:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
        },
        methods:{
            demo(event,a,b,c){
                
            }
        }
    })
</script>

Vue中的事件修饰符

1.prevent：阻止默认事件（常用）；

<a href="https://cn.bing.com" @click.prevent="demo">btn</a>

a标签的默认行为会跳转到href所指的页面,加了prevent后,该行为会被阻止。

2.stop：阻止事件冒泡（常用）；

<div @click="demo2">
    <button @click.stop="demo1">btn</button>
</div>

这种情况点击button后, button的demo1函数会被触发, 但div的demo2函数不会被触发。(不加stop, demo1和demo2都会触发)

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

<div @click.capture="demo2">
    <button @click="demo1">btn</button>
</div>

这种情况点击button后,会先触发demo2再触发demo1。不加capture的时候点击button是先触发demo1再触发demo2。

5.self：只有event.target是当前操作的元素时才触发事件；

<div @click.self="demo2">
    <button @click="demo1">btn</button>
</div>

这种情况点击button后, event.target是button, 所以button的demo1函数会被触发, 但div的demo2函数不会被触发。只有点击div的时候, demo2会被触发。

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<style>
    .list{
        width: 200px;
        height: 200px;
        background-color: orange;
        overflow: auto;
    }
    li{
        height: 100px;
    }
</style>
<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

这种情况, 滚动鼠标滚轮后, 会先执行demo函数, 再滚动滚动条。

tips: 修饰符可以连续写多个, 比如:

<div @click="demo2">
    <a href="https://cn.bing.com" @click.prevent.stop="demo1">btn</a>
</div>

既阻止的a标签的默认事件, 又阻止了事件冒泡。

键盘事件

基本用法

按键按下后触发函数

<input type="text" @keydown="demo">

按键抬起后触发函数

<input type="text" @keyup="demo">

按键别名

使用按键别名可以仅在按下/抬起指定按键后才触发函数。

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，需要配合keydown去使用)
这是因为tab有一个切换到下一个焦点的默认行为, 当按键抬起(keyup)的时候,焦点已经切换走了。除非你在tab键抬起后, 焦点刚好停在绑定keyup事件的标签上, keyup绑定的函数才会触发。
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意多个单词组成的按键要转为kebab-case（短横线命名）, 比如CapsLock => caps-lock。

可以通过 console.log(event.key)来获取按键原始的key值。

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。可以通过连续写多个按键别名的方式来达到组合键的效果, 如: @keyup.alt.q="demo"。
(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

可以通过 console.log(event.keyCode)来获取按键的keyCode。

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。

<div id="root">
    <input type="text" @keyup.huiche="demo">
</div>
<script type="text/javascript">
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

    new Vue({
        el:'#root',
        data:{

        },
        methods: {
            demo(e){
                console.log(e.target.value)
            }
        },
    })
</script>