Vue绑定事件

事件绑定&监听事件

v-on 指令监听DOM事件，并在触发时运行一些javascript代码

<div id="app">
    <button v-on:click="count+=1">计数</button>
    <p>{{count}}</p>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            count:1/*定义并初始化*/
        }
    })
</script>

实例中 click触发count+=1的javascript代码

事件处理方法

少量代码可以放在click="代码"中，如果事件处理逻辑变得复杂，就接收需要调用的方法名称。

<div id="app">
    <button v-on:click="greet">计数</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        methods:{
            greet: function (event) {
                alert('Hello '  + '!')
            }
        }
    })
</script>

内联处理方法&传参数

v-on指令不仅可以绑定到一个方法，也可以在内联javascript语句中调用方法

<div id="app">
    <button v-on:click="greet('Vue')">greet</button>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        methods:{
            greet: function (name) {
                alert('Hello ' +name + '!')
            }
        }
    })
</script>

事件修饰符

一些事件处理程序，可以通过v-on.修饰符轻松实现

1、阻止单击事件继续传播

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

2、 提交事件不再重载页面

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

3、只有修饰符

<form v-on:submit.prevent></form>

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

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

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

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

6、点击事件将只会触发一次

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

7、滚动事件的默认行为 (即滚动行为) 将会立即触发而不会等待 onScroll 完成这其中包含event.preventDefault() 的情况

<div v-on:scroll.passive="onScroll">...</div>

8、只有在 key 是 Enter 时调用 vm.submit()

<input v-on:keyup.enter="submit">