事件修饰符 vue中 为a标签添加点击事件不跳转href

事件修饰符

运用事件修饰符 .prevent 阻止默认行为

 <a href="https://www.baidu.com/" @click.prevent="aClick">点我</a>

以此类推

运用事件修饰符 .stop 阻止冒泡
只执行 start 不执行 end

<div id="app" @click="end">
    <input type="button" value="开始" @click.stop="start">
</div>

运用事件修饰符 .capture 捕获机制
点击按钮 先执行 end 再执行 start

<div id="app" @click.capture="end">
    <input type="button" value="开始" @click="start">
</div>

运用事件修饰符 .self 只点击自身才触发
点击按钮不触发end事件，只有点击div才可以触发

<div id="app" @click.self="end">
    <input type="button" value="开始" @click="start">
</div>

运用事件修饰符 .once 只执行一次
点击按钮只触发一次start事件，第二次没反应

<input type="button" value="开始" @click.once="start">

.self 和 .prevent 都有阻止默认冒泡的功能。
.self 只能使自己不冒泡，但是.prevent 可以使除自己外的作用都不冒泡

按键修饰符

点击回车添加数据

<input type="text" v-model="name" @keyup.enter="add">

或者

Vue.config.keyCodes.zmenter = 13;
<input type="text"  v-model="name" @keyup.zmenter="add">