Vue事件绑定

目录

• Vue事件绑定
  • 监听事件
  • 事件处理方法
  • 内联处理方法
  • 事件修饰符

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.修饰符轻松实现

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">