Vue.JS入门教程之事件监听

<div id="demo">
 <a v-on="click: onClick">触发一个方法函数</a>
 <a v-on="click: n++">触发一个表达式</a>
</div>

new Vue({
el: '#demo',
data: {
 n: 0
},
methods: {
 onClick: function (e) {
 console.log(e.targetVM.n);
 console.log(e.target.tagName);// "A"
 console.log(e.targetVM === this);// true
 }
}
});

<ul id="list">
 <li v-repeat="item in items" v-on="click: toggle(item)">
 {{item.text}}
 </li>
 <button v-on="click: submit('hello!', $event)">Submit</button>
</ul>

new Vue({
el: '#list',
data: {
 items: [
 { text: 'one', done: true },
 { text: 'two', done: false }
 ]
},
methods: {
 toggle: function (item) {
 console.info(item.done);
 item.done = !item.done;
 console.info(item.done);
 },
 submit: function (msg, e) {
 e.stopPropagation();
 console.info(msg + ' submit is called!');
 }
}
})

<!-- 只有当 keyCode 等于 13 时才调用方法 -->
<input v-on="keyup:mySubmit | key 13">

<!-- 效果同上 -->
<input v-on="keyup:submit | key 'enter'">