Vue学习笔记（三）Vue事件处理

Vue中使用v-on来监听DOM事件执行JavaScript代码

直接监听事件

---

使用Vue时在v-on后写上监听的事件，其后可以跟着JavaScript代码，当监听的事件被触发时，就会执行其后的JavaScript代码

<div id="app">
    <button v-on:click="count++">增加</button>
    <p>{{count}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count: 0
        }
    });
</script>

这里点击按钮count的数值就会不停增加

v-on的缩写

---

v-on可以使用@来代替

比如上面的代码可以改为

<button @click="count++">增加</button>

调用方法处理

---

有时候事件对应的操作太繁多，不可能全部都写在html里面，这个时候调用方法是一个好的选择

<div id="app">
    <button @click="fn">按钮</button>
    <!-- 等同于 -->
    <button @click="fn()">按钮</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn() {
                alert('this is vue');
            }
        }
    });
</script>

调用方法时如果没有参数，可以不加括号。

对于有参方法，可以直接在内联中传入参数

<div id="app">
    <button @click="fn('hello')">hello</button>
    <button @click="fn('hi')">hi</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn(val) {
                alert(val);
            }
        }
    });
</script>

如果要在内联中访问DOM原生事件，可以使用$event作为参数传入方法。

<div id="app">
    <button @click="fn($event)">获取鼠标位置</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn(event) {
                alert(event.clientX);
            }
        }
    });
</script>

事件修饰符

---

事件修饰符是用于对事件的处理，比如阻止冒泡，阻止默认行为，改为捕获的监听等，虽然这些内容也可以在函数内部处理，但是使用事件修饰符可以使得函数内部只需要处理相应的逻辑处理，不用去考虑DOM的内容。

1. stop:阻止事件的冒泡
2. prevent：阻止事件的默认行为
3. capture：添加事件监听器时使用捕获模式
4. self：事件只有在元素本身触发才有效，子元素中触发无效
5. once：事件只会触发一次

stop

原本在冒泡的事件监听中，触发子元素的事件会向上触发父元素的事件，这里点击span标签本应触发父元素的点击事件，但是使用stop修饰符后就被阻止了。

<div id="app">
    <div @click="div">div
        <span @click.stop="span">span</span>  //  只弹出一个alert
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            div() {
                alert('div')
            },
            span() {
                alert('span')
            }
        }
    });
</script>

prevent

这里在点击a标签后本应该触发事件后跳转到百度页面的，但是加上了prevent后就没有跳转，默认事件被阻止了。submit的页面刷新也能被prevent阻止。

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="fn">超链接被阻止</a>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn() {
                alert('你是离不开这里的')
            }
        }
    });
</script>

capture

这里点击span标签本应先弹出‘div’后弹出‘span’，但是使用了capture变成了事件捕获之后，就会先弹出‘span’后弹出‘div’

<div id="app">
    <div @click.capture="div">div
        <span @click="span">span</span>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            div() {
                alert('div')
            },
            span() {
                alert('span')
            }
        }
    });
</script>

self

这里点击span标签时由于事件冒泡，div1和div2两个点击事件都应该被触发，但是由于div2使用了self修饰符，所以通过子元素的冒泡不会触发其点击事件，所以点击span标签会弹出“span”和“div1”两个框，而点击div2时会弹出“div2”和“div1”两个框

<div id="app" @click="div1">
    <div @click.self="div2">div2
        <span @click="span">span</span>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            div1() {
                alert('div1')
            },
            div2() {
                alert('div2')
            },
            span() {
                alert('span')
            }
        }
    });
</script>

once

这里点击按钮msg本应一直上升，但是加上了once后，只会执行一次，即只是加到1就停止了

<div id="app">
    <span>{{msg}}</span>
    <button @click.once="add">增加</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 0
        },
        methods: {
            add() {
                this.msg++;
            }
        }
    });
</script>

按键修饰符

---

keyCode监听

通过在事件后面使用.加上keyCode可以监测键值

<div id="app">
    <input type="text" v-model="msg" @keyup.13="fn">
    <!-- 回车键的键码为13 -->
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 0
        },
        methods: {
            fn() {
                console.log(this.msg);
            }
        }
    });
</script>

这里在本文框中按下回车键就会触发fn方法

按键别名监听

记住所有keyCode很麻烦，在Vue中提供了按键别名

• enter
• tab
• delete (捕获 “删除” 和 “退格” 键)
• esc
• space
• up
• down
• left
• right

下面这段代码使用按键别名enter，和上面使用keyCode13结果是一样的。

<div id="app">
    <input type="text" v-model="msg" @keyup.enter="fn">
    <!-- 回车键的键码为13 -->
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 0
        },
        methods: {
            fn() {
                console.log(this.msg);
            }
        }
    });
</script>

自定义按键别名

除了使用Vue提供的按键别名外，我们也能自己定义按键别名，使用Vue.config.keyCodes就能在全局定义按键别名。

下面这段代码将f2的键码对应定义了别名f2，当按下f2键时就会触发fn方法。

<div id="app">
    <input type="text" v-model="msg" @keyup.f2="fn">
</div>
<script>
    Vue.config.keyCodes.f2 = 113; // f2键码为113
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 0
        },
        methods: {
            fn() {
                console.log(this.msg);
            }
        }
    });
</script>