Vue笔记——v-on用于绑定事件

< body >

< div id =" app "> //事件名称：方法 v-on:事件=“方法”

< button v-on =" {mouseenter: onEnter, mouseleave: onOut} " @ click =" onClick ">点我 </ button >

< form @ keyup . enter =" onEr " @ keyup =" onKeyup " @ submit . prevent =" onSubmit ">

< input type =" text ">

< button type =" submit ">提交表单 </ button >

</ form >

</ div >

</body>

JS

var app = new Vue({

el : ' #app ',

methods : {

onClick : function () {

console . log( ' clicked ') ;

},

onEnter : function () {

console . log( ' mouse enter ') ;

},

onOut : function () {

console . log( ' mouse leave ') ;

},

onSubmit : function () {

console . log( ' submitted ') ;

},

onKeyup : function () {

console . log( ' key pressed ') ;

},

onEr : function () {

console . log( ' Entered ') ;

},

},

}) ;