当模板渲染完成后,就可以进行事件的绑定和监听了
v-on:click/ @click
一.方法及内联语句处理器
二.常用修饰符
(1).stop 阻止冒泡事件
(2).prevent 阻止默认事件
<a href="http:www.cnblogs.com">cnblogs</a>点击跳转
<a href="http:www.cnblogs.com" @click.prevent>cnblogs</a> 点击不会跳转
<a href="http:www.cnblogs.com" @click.prevent="hiYourself">cnblogs</a> 点击不会跳转,但会执行hiYourself方法
(3).capture添加事件监听器(父元素中使用)
a.点击sayHis,会先执行子元素sayHis, 再执行父元素方法sayHif :son father
<div @click=''sayHif''>
<button @click="sayHIs">sayHis</button>
</div>
b.点击sayHis,会先执行父元素方法sayHif, 再执行子元素sayHis:father son
<div @click.capture=''sayHif''>
<button @click="sayHIs">sayHis</button>
</div>
(4).self 只当事件是从监听元素本身出发时才触发回调
(5)一些按键修饰符
<input v-on:keyup.13="submit" />
监听input的输入,回车时触发submit事件,(回车的keycode值为13)
常见的按键名被提供了别称:enter、tab、delete、esc、space、up、down、left、right
上面的可以写成:
<input v-on:keyup.enter="submit" />
也可以在Vue.config.keyCodes里添加自定义按键别名,无需修改v-on指令,例如:Vue.config.keyCodes.f1 = 112;