监听事件
v-on
可以指定监听DOM事件,并在触发时执行一些JS代码。
<button v-on:click="(JS)"></button>
其中JS可代表 js代码 js方法名 或者直接就是js调用方法。
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="greet">Greet</button>
<button v-on:click="say('hi')">Say hi</button>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
把它传入方法:
<div id="app">
<button v-on:click="warn('Form cannot be submitted yet.', $event)">submit</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
})
</script>
event.preventDefault() 方法阻止元素发生默认的行为。
例如:
当点击提交按钮时阻止对表单的提交
阻止以下 URL 的链接
事件修饰符
像上面那种原生DOM事件,可能经常需要使用,所以Vue.js给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>
<!-- 2.1.4 新增 -->
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!--2.3.0 新增-->
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
按键修饰符
<div id="app">
<input type="text" v-on:keyup.enter="asubmit">
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
asubmit:function(){
alert("success")
}
}
})
</script>
这样一来当焦点在input上时,单击回车就会输出success的信息。