vue-事件处理

事件处理

1、监听事件

什么是监听事件

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

【案例】

<div id="app">
    {{msg}}
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"事件处理",
            counter:0
        }
    })
</script>
结果如下

2、方法事件处理器

为什么要用方法事件处理器

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

【案例】

<div id="app">
    <button v-on:click="greet">greet</button>
    <button v-on:click="greet1">greet1</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"事件处理",
            counter:0
        },
        methods:{
            greet1:function(event){
                alert("你好"+this.msg+"!");//结果：你好事件处理！
                if(event){
                    alert(this.msg);//结果：事件处理
                }
            }
        }

    })
</script>

3、内联处理器方法

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

【例如】

<div id="app">
   <button v-on:click="greet2('内联处理器方法')">greet2</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"事件处理",
            counter:0
        },
        methods:{
            greet2:function(aaa){
                alert(aaa);//结果为：内联处理器方法
            }
        }
    })
</script>

4、事件修饰符

事件修饰符有基本的6中

.stop阻止事件冒泡

<a v-on:click.stop="doThis"></a>

.prevent阻止默认事件

<form v-on:submit.prevent="onSubmit"></form>

.capture时间捕获（从上到下）

<div v-on:click.capture="doThis">...</div>

.self只在元素自身回调

<div v-on:click.self="doThat">...</div>

.once只触发一次

<a v-on:click.once="doThis"></a>

【切记】

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

5、键值修饰符

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

例如我们给enter键添加事件

enter的keyCode值为13

<div id="app">
    {{msg}}
    <input type="text" v-on:keydown="ke"/>
</div>
<script>
var app = new Vue({
        el:"#app",
        data:{
            msg:"事件处理",
            counter:0
        },
        methods:{
            ke:function(e){
                if(e.keyCode == 13){
                    this.msg = e.target.value;
                    e.target.value = "";
                }
            }
        }
});
结果看下图

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

enter(回车)

tab（tab切换）

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

esc（esc键）

space（退档键）

up（上键）

down（下键）

left（左键）

right（右键）

我们也可以通过全局 config.keyCodes 对象自定义键值修饰符别名

Vue.config.keyCodes.f1 = 112

6、修饰键

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

ctrl

alt

shift

meta

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

6.1、鼠标按钮修饰符

left（左）

right（右）

middle（滑轮）