Vue从零开始总结13

v-on修饰符，拓展

@事件.stop停止冒泡事件

如果没加的话

html中

<div id="test" @click="show1">
   啊啊啊啊啊
   <button @click="show2">测试</button>
</div>

js methods中

show1()
{
   console.log('div');
},
show2()
{
   console.log('btn');
}

如下图所示：

点击子元素，却同时输出了父子元素里的内容

我们想解决这个问题，只需要在HTML中

<div id="test" @click="show1">
   啊啊啊啊啊
   <button @click.stop="show2">测试</button>
</div>

效果如下：

当我们再去点'啊啊啊啊'时输出的就是父元素里的内容了

@事件.prevent阻止默认行为

当我们不使用prevent时

html中

<form action="yourWebServer">
   <input type="submit" value="提交">
</form>

点击之后页面自动提交给指定服务器

再我们加了之后，就不会自动提交，我们还可以在里面实现别的功能

<form action="yourWebServer">
   <input type="submit" value="提交" @click.prevent="sub">
</form>

sub()
{
   console.log('subPoint');
}

用户点击提交按钮。按理来说应该就反应一次，你这个咋还能一直点

那么我们就再加个once就好了，只响应一次嘛

<form action="yourWebServer">
   <input type="submit" value="提交" @click.once.prevent="sub">
</form>

之前都是鼠标的监听事件

这次我们不妨试试键盘的

<form action="yourWebServer">
   <input type="submit" value="提交" @click.once.prevent="sub">
   <input type="text" @keyup="sub">
</form>

效果如下：

我们不难发现它是统计每次键盘抬起的事件

如果你长按一个键，只能算是一次

还有一种特殊情况

@事件.enter键代码 只有按到指定按键才会触发

<form action="yourWebServer">
   <input type="submit" value="提交" @click.once.prevent="sub">
   <input type="text" @keyup.enter="sub">
</form>

还有最后一个组件化当中用到的@事件.native在后续我们再总结