Vue的事件处理方法

事件处理

上一篇：Vue的条件渲染与列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表单输入绑定：https://segmentfault.com/a/11...

事件监听

v-on 指令可以用来监听dom事件来执行一些js代码

<div class="exp">
    <p>这个按钮被点击了{{msg}}次</p>
    <input type="button" value="按钮" v-on:click="msg+=1"></input>
</div>
<script>
    new Vue({
        el:'.exp',
        data:{
            msg:0
        }
    })
</script>

方法事件处理器

许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

<div class="exp">
    <input type="button" v-on:click="cli" value="按钮"></input>
</div>
<script>
    new Vue({
        el:'.exp',
        data:{
            msg:"hello"
        },
        methods:{
            cli:function(){
                alert(this.msg)
            }
        }
    })
</script>

内联处理器方法

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div class="exp">
    <input type="button" v-on:click="cli('hi')" value="hi"></input>
    <input type="button" v-on:click="cli('hello')" value="hello"></input>
</div>
<script>
    new Vue({
        el:'.exp',
        methods:{
            cli:function(msg){
                alert(msg)
            }
        }
    })
</script>

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

<div class="exp">
    <input type="button" value="Submit" v-on:click="warn('Form cannot be submitted yet.', $event)">
</div>
<script>
    new Vue({
        el:'.exp',
        methods: {
            warn: function (message, event) {
                // 现在我们可以访问原生事件对象
                if (event) event.preventDefault()
                alert(message)
            }
        }
    })
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

• .stop

• .prenent

• .capture

• .self

• .once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。先来看看如何获取键值：

<div class="exp">
    <input type="button" value="按钮" v-on:keydown="keyboard">
</div>
<script>
    new Vue({
        el:'.exp',
        methods: {
            keyboard:function(e){
                console.log(e.keyCode)
            }
        }
    })
</script>

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

• .enter

• .tab

• .delete

• .esc

• .space

• .up

• .down

• .left

• .right

修饰健

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。

• .ctrl

• .alt

• .shift

• .meta
  比如：

<div class="exp">
    <input type="button" value="按钮" v-on:keydown.ctrl.alt="keyboard">
</div>
<script>
    new Vue({
        el:'.exp',
        methods: {
            keyboard:function(){
                alert(1)
            }
        }
    })
</script>

同时按下ctrl和alt键，会有一个弹窗

鼠标按钮修饰符

• .left

• .right

• .middle

这些修饰符会限制处理程序监听特定的鼠标按键.

To be continue......

上一篇：Vue的条件渲染与列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表单输入绑定：https://segmentfault.com/a/11...