v-on的使用及修饰符的用法

v-on的使用及修饰符的用法


//
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 只会阻止对元素自身的点击。

参考自 bug菌 CSDN博客

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的意思就是前面的条件满足了,才会去执行后面的。

上面这句话未求证

你可能感兴趣的:(Vue的学习,vue,v-on,前端,JavaScript)