v-on 指令用来 监听 DOM 事件
<button v-on:click="say">Say</button>
方法及内联语句处理器
使用methodsz中的方法作为事件的处理器,
v-on:后的参数接受所有的原生事件名称
<button v-on:click="say">Say</button>
var vm = new Vue({
el : '#app',
data: {
msg : 'Hello Vue.js'
},
methods : {
say : function() {
alert(this.msg);
}
} });
输出:Hello Vue.js
v-on 也支持内联 JavaScript 语句,但仅限一个语句
<button v-on:click="sayFrom('from param')">Say</button>
var vm = new Vue({
el : '#app',
data: {
msg : 'Hello Vue.js'
},
methods : {
sayFrom: function(from) {
alert(this.msg + '' + from);
}
} });
同一元素上也可以通过 v-on 绑定多个相同事件函数,执行顺序为顺序执行
<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)">
修饰符
v-on有多个修饰符,处理事件的细节
<a v-on:click.stop='doThis'></a> <!-- 阻止单击事件冒泡 -->
<form v-on:submit.prevent="onSubmit"></form> //阻止表单默认提交事件
<form v-on:submit.stop.prevent="onSubmit"></form> //阻止默认提交事件且阻止冒泡
<form v-on:submit.stop.prevent></form>//可以只有修饰符,并不绑定事件
注:事件冒泡的意思就是点击子节点,会向上触发父节点,祖先节点的点击事件。比如一个div,包裹另一个div的情况,外围的div就是父节点。
v-on 还提供了按键修饰符
<input v-on:keyup.13="submit"/> //当输入回车时触发 Submit 函 数
//全部按 键别名为:enter、tab、delete、esc、space、up、down、left、right
<input v-on:keyup.enter="submit" />
内置指令
1.v-bind
<a v-bind:href="url">...</a> 简写为<a :href="url">...</a>
告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
2.v-on
<a v-on:click="doSomething">...</a> 简写为<a @click="doSomething">...</a>