Vue 事件处理

事件处理

监听事件 (绑定)

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

 <div id="app">
    <input type="button" v-on:click="number+=1" value="按钮"/> 
    <p>这个按钮被点击了 {{number }} 次。</p>
</div>  

var vm=new Vue({
    el:'#app',
    date:{
        number:1,
    },  
})  

方法事件处理器

事件处理器可以放在方法里，也可以放在普通函数vm.method()里

<div id="app">
    <input type="button" v-on:click="tanchu" value="按钮"/>
</div>  

var vm=new Vue({
    el:'#app',
    date:{
        msg:'hello world!',
        number:1,
    },
    methods:{
        tanchu:function(event){
            console.log(event.target);
            console.log(event.type);
        },
    }
});  

内联处理方法

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

<div id="app">
    <input type="button" v-on:click="tanchu('helloworld',$event)" value="按钮"/>
</div>  

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

var vm=new Vue({
    el:'#app',
    date:{
        msg:'hello world!',
        number:1,
    },
    methods:{
        tanchu:function(xiaoxi,event){
           console.log(xiaoxi); console.log(event.target);
            console.log(event.type);
        },
    }
});  

事件修饰符

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

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

• .stop

• .prevent

• .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>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

键值修饰符

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

<div id="app">
    {{msg}}
    <input type="ext" v-on:keydown="keyDown"/>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        date:{
            msg:'hello world!',
        },
        methods:{
           keyDown:function(e){
               console.log(e.keyCode);
               //48-57  表示0-9
               //37-40  表示上下左右
               //13 32  Enter 空格  

               if(e.keyCode==13){
                   this.mag=e.target.value;
                   e.target.value="";
               }
           }
        }
    });
</script>  

也可以这样写

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">  

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

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">  

全部的按键别名：

• .enter

• .tab

• .delete (捕获 “删除” 和 “退格” 键)

• .esc

• .space

• .up

• .down

• .left

• .right

还有两个键的

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>  

修饰键比正常的按键不同；修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

鼠标修饰符

• .left

• .right

• .middle