Vue ------ 事件处理

---

本文主要是自己学习前端的一些总结和归纳。参考文档连接放在文章最后，有需要的可以自行去查看。

一、事件监听

用 v-on 来监听DOM事件，并且在触发的时候，运行一些代码。

    <div id="test-1">
        <!-- 利用 v-on 来监听事件，并且添加了一些js运算代码 -->
        <button v-on:click="counter += 1">点击加一</button>
        <p>这个按钮已经点击了 {{counter}} 次</p>
    </div>

    <script>
        var but = new Vue({
            el: '#test-1',
            data: {
                counter: 0
            }
        })
    </script>

二、事件处理方法

如果是复杂的逻辑直接写在标签中，过于冗余。所以v-on 可以接受一个需要调用的方法名称。

 <!-- 事件处理方法 -->
    <div id="test-2">
        <button v-on:click="greet">Greet</button>
    </div>

    <script>
        var test2 = new Vue({
            el: '#test-2',
            data: {
                name: '卓别林'
            },
            //在'methods' 对象中定义方法
            methods: {
                greet: function (event) {
                    // 'this'在方法中指向当前 Vue 实例
                    alert('欢迎来到' + this.name + '的世界!')

                    //event 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })

        // test2.greet();
    </script>

三、内联处理器中方法

除了直接绑定方法，也可以在内联js语句中调用方法。如果需要访问原始的DOM事件，可以用$event 传入方法：

<!-- 内联处理器中方法 -->
    <div id="test-3">
        <button v-on:click="say('hi')"> Say Hi </button>
        <button v-on:click="say('what')"> Say What</button>

        <!-- 当需要在内联语句处理器中访问原始的DOM事件，可以用特殊的 $event 传入方法 -->
        <button v-on:click="warn('From cannot be submitted yet.',$event)"> 提交 </button>
    </div>

    <script>
        new Vue({
            el: '#test-3',
            methods: {
                say: function (message) {
                    alert(message)
                },
                warn: function (message, event) {
                    //现在我们可以访问原生事件对象
                    if (event) {
                        event.preventDefault() //取消事件的默认动作
                    }
                    alert(message)
                }
            }
        })

    </script>

四、事件修饰符

在事件处理中，调用event.preventDefault() 或者
event.stopPropagation()是非常常见的需求。更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

v-on提供了事件修饰符，由点开头的指令后缀表示， 修饰符可以串联 ：

• .stop - 阻止事件的传播

• .prevent- 取消默认动作

• .capture -添加监听事件时，使用事件捕获模式， 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

• .self -只当在 event.target 是当前元素自身时触发处理函数 ， 事件不是从内部元素触发的

• .once -事件值只被触发一次

• .passive -能够提升移动端的性能 。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

五、系统修饰符

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

• .ctrl
• .alrt
• .shift
• .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows
徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp
机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics
键盘上，meta 被标记为“META”或者“Meta”。

<!-- 系统修饰符 -->
    <div id="test-4">
        <!-- ctrl + c -->
        <input type="text" v-on:keyup.ctrl.67="clear">

        <!-- alt + Click -->
        <button v-on:click.alt="doSomething">Do something</button> <br>

        <!-- 精准控制 -->
        <!-- 和别的任何一个其他键一同按下时也会触发 -->
        <button v-on:click.ctrl="onClick">A</button>

        <!-- 有且只有 Ctrl 被按下的时候才触发。可以尝试一直按着alt,再同时按下Ctrl和点击，事件不会被触发 -->
        <button v-on:click.ctrl.exact="onClick">B</button>

        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button v-on:click.right.exact="onClick">C</button>
    </div>

    <script>
        var test4 = new Vue({
            el: '#test-4',
            methods: {
                clear: function () {
                    alert('无法复制！')
                },
                doSomething: function () {
                    alert('操作失败！')
                },
                onClick:function(){
                    alert('操作成功')
                }
            }
        })
    </script>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

.exact 允许控制由精准的系统修饰符组合触发的事件。

        <!-- 精准控制 -->
        <!-- 和别的任何一个其他键一同按下时也会触发 -->
        <button v-on:click.ctrl="onClick">A</button>

        <!-- 有且只有 Ctrl 被按下的时候才触发。可以尝试一直按着alt,再同时按下Ctrl和点击，事件不会被触发 -->
        <button v-on:click.ctrl.exact="onClick">B</button>

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

六、鼠标修饰符

• .left
• .right
• .middle

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

<button v-on:click.right.exact="onClick">C</button>

---

总结

html中监听事件的好处：

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

本文参考：Vue.js 事件处理