v-on的使用及修饰符的用法
<input type="button" value="按钮" @click="alert" />
//
var vm = new Vue({
el:'#ctr-01',
methods:{
alert:function(){
alert('你好吗？')
}
}
})
@是v-on的简写 后面紧跟事件名称，支持标准事件
使用event
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
事件修饰符
.stop//对应event.stopPropagation 阻止事件冒泡.prevent//对应event.preventDafault 阻止默认事件.capture// 设置事件为捕获流中.self// 只有event.target 为自身才触发事件.once// 事件只触发一次-
.passive// 不检查是否默认事件被阻止 用于触碰滚动时性能会更好.self的理解
我们知道在一般情况下，e.target总是指向最内层的元素 所以如果父元素设置了 .self 修饰符 那么他在点击子元素时，并不会触发被修饰的事件；只有点击没有子元素的空白区域时，才会触发被修饰的事件
官方文档的一个提示
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
v-on:click.prevent.self的demo如下：
<div id="box">
<div @click="alert(1)">
<a href="/#" @click="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
</div>
此时点击a标签会依次弹出2，1，跳转。点击div标签会依次弹出3，2，1，跳转。这发生了事件冒泡。
咱们看一下加上v-on:click.prevent.self之后的：
<div @click="alert(1)">
<a href="/#" @click.prevent.self="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
此时点击a标签会依次弹出2，1。点击div标签会依次弹出3，1。此时各位看官已经发现，a标签不仅没有冒泡，也没有跳转，这就是官网说的会阻止所有的点击。
v-on:click.self.prevent的demo如下：
<div @click="alert(1)">
<a href="/#" @click.self.prevent="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
点击div标签会依次弹出3，1，跳转。此时a标签没有响应弹框，但是发生了跳转，这就是官网说的只会阻止对元素自身的点击。
作者：bug菌
来源：CSDN
原文：https://blog.csdn.net/qq_39105508/article/details/83008604
版权声明：本文为博主原创文章，转载请附上博文链接！
再深层寻找了解释
selt的意思就是前面的条件满足了，才会去执行后面的。
上面这句话未求证
