VUE--v-on修饰符
1、v-on的修饰符
.stop:阻止事件冒泡
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
.prevent:阻止默认行为
<form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
.enter:监听enter(确认)键的情况-------(按下\弹起)
<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
.once:事件只触发一次
<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
******完整代码*******
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> </head> <div id="app"> <div @click="getTitle"> 阿Q <button @click="getBut">按钮</button> <button @click.stop="getBut2">按钮2</button> </div> <br> <form action="Baidu"> <input type="submit" value="提交"> <input type="submit" value="提交" @click.prevent="getSubmit"> </form> <br> <input type="text" @keyup="getKeyup"> <input type="text" @keyup.enter="getKeyup"> <br> <br> <button @click="getOnce">按钮</button> <button @click.once="getOnce">按钮2</button> </div> <body> <script> let vm = new Vue({ el: '#app', data: () => ({ }), methods: { getTitle: () => { console.log("啊Q") }, getBut: () => { console.log('Btn') }, getBut2: () => { console.log('Btn2') }, getSubmit: () => { console.log('getSubmit') }, getKeyup: () => { console.log('getKeyup') }, getOnce: () => { console.log('getOnce') } } }) </script> </body> </html>