Vue之事件处理

事件处理

---

1. 监听事件

1. v-on指令监听事件 ,触发时执行一些简单的JavaScript代码

    <button v-on:click="count ++" >点击</button>

2.事件处理方法

1. 事件处理逻辑较为复杂的时候 JavaScript代码写在标签中影响可读性，所以v-on 可以接受一个方法名 ，根据这个方法名调用方法

<div id="first">
    <!--可以缩写为 @ -->
    <button @click="hello">点击</button>
</div>
<script>
    new Vue({
        el:'#first',
        data:{},
        methods:{
            hello:function(){
                alert("hello world");
            }
        }
    })
</script>

3.内联JavaScript中调用方法

不仅仅是绑定一个方法 也可以 在内联JavaScript语句中调用方法

<div id="first">
    <button @click="ale(123)">点击</button>
</div>
<script>
    new Vue({
        el:'#first',
        data:{},
        methods:{
            ale:function(a){
                alert(a);
            }
        }
    })
</script>

事件修饰符

正常情况 我们可以在JavaScript语句内调用 event.preventDefault() 或 event.stopPropagation()来阻止默认事件 比如组织a标签的跳转 或者 冒泡使劲按 管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 Vue提供了 v-on指令的事件修饰符 以 “.事件修饰符” 方式使用

1.无事件修饰符

    <!--1.正常无事件修饰符  触发事件冒泡-->
    <div  id="div1" @click="div1" >
    <input type="button" @click="btn" value="点击"/>
   </div>

    var vm=new Vue({
        el:"#first",
        data:{},
        methods:{
         div1 :function(){console.log("触发div1事件");},
         btn:function(){console.log("触发btn事件");},
         aa:function(){console.log("触发超链接，阻止a标签默认的跳转行为");},
         div2:function(){console.log("触发div2事件")}
        }
    })

2. stop 阻止冒泡事件

    <!--2.事件修饰符stop    阻止冒泡事件 @click之后添加修饰符-->
    <div  id="div1" @click="div1" >
    <input type="button" @click.stop="btn" value="点击"/>
    </div>

3. prevent 阻止默认事件

     <!--3.阻止默认行为 prevent    会触发方法 但是不会跳转到新的链接-->
    <a href="事件修饰符.html" @click.prevent="aa">跳转</a>

4. once 只触发一次事件(2.14版本新增)

<a href="v-on.html" @click.prevent.once="aa">跳转</a>

5. capture 使用事件捕获机制

    <!--5.使用事件捕获机制 capture  从外向内  触发div1  就会触发按钮-->
    <div  id="div1" @click.capture="div1" >
        <input type="button" @click.stop="btn" value="点击"/>
    </div>

6. self 只有点击当前元素触发

    <div @click="div2" id="second">
        <div @click.self="div1" id="one">
            <input type="button" @click="btn" value="点击"/>
        </div>
    </div>

7. self 与stop的区别

<!--stop会阻止冒泡  到阻止元素后 就停止冒泡  self会越过-->
    <div @click="div2" id="second">
        <div @click.stop="div1" id="one">
            <input type="button" @click="btn" value="点击"/>
        </div>
    </div>
<!--只有直接点击元素的时候可以触发 不能被事件捕获  事件冒泡触发-->
    <div @click="div2" id="second">
        <div @click.self="div1" id="one">
            <input type="button" @click="btn" value="点击"/>
        </div>
    </div>

按键修饰符

---

1.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

 <!--    点击enter的时候触发 事件-->
    <input type="text"  v-on:keyup.enter="a" placeholder="点击enter触发事件"  />

    <!--    alt与enter同时按的时候 触发事件-->
    <input type="text"  v-on:keyup.enter.alt="a"  placeholder="点击回车加alt 触发事件"/>

2.按键码

此用法已经被废弃

<div id="first">
    <!--    系统预定义的时候只是部分的键   如果是F2 可以查询 对应 的键盘码表-->
    <input type="text"  v-on:keyup.113="a"  />
    <input type="text"  v-on:keyup.f4="a"  />
</div>

<script>
<!--    -->
    //自定义全局按键修饰符
   Vue.config.keyCodes.f4=115;
    new Vue({
        el:"#first",
        data:{},
        methods:{
            a:function(){
                alert("hello world");
            }
        }
    })
</script>

3.系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器 ctrl alt shift meta

<input @keyup.alt.67="clear">

4. exact 修饰符

exact 英文意为精准 (先按住按键 再点击按钮)

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

5.鼠标按钮修饰符

.left .right .middle修饰符 这些修饰符会限制处理函数仅响应特定的鼠标按钮。

<div id="first">
<!--    鼠标左键 触发-->
    <button @click.left="a">A</button>
<!--    点击的同时  点击鼠标右键触发-->
    <button @click.right="a">B</button>
</div>
<script>
    new Vue({
        el:"#first",
        data:{},
        methods:{
            a:function(){
                alert("hello world");
            }
        }
    })
</script>

有不明白的地方 可以去官网查看教程 https://cn.vuejs.org/v2/guide/events.html