Vue.js系列教材（二）- vue.js 监听事件 v-on 的用法

工具版本兼容问题

步骤 1 : v-on 监听事件
步骤 2 : v-on 缩写为 @
步骤 3 : 事件修饰符
步骤 4 : 冒泡这件事
步骤 5 : 事件修饰符阻止冒泡 .stop
步骤 6 : 事件修饰符优先触发 .capture
步骤 7 : 事件修饰符只有自己能触发，子元素无法触发.self
步骤 8 : 事件修饰符只能提交一次 .once
步骤 9 : 事件修饰符阻止提交 .prevent

步骤 1 :

v-on 监听事件

edit 顶折

纠问

1. 在 js里为 Vue 对象的数据设置为 clickNumber

data: {
clickNumber:0
}

2. 新建一个方法： count，其作用是 clickNumber 自增1

methods:{
count: function(){
this.clickNumber++;
}
}

3. 在按钮上增加 click 监听，调用 count 方法

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<div id="div1">
 
  <div>一共点击了  {{clickNumber}}次</div>  
  <button v-on:click="count">点击</button>
 
</div>
  
<script>
  
new Vue({
      el: '#div1',
      data: {
    	  clickNumber:0
      },
      methods:{
    	  count: function(){
    		  this.clickNumber++;
    	  }
      }
    })
  
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 2 :

v-on 缩写为 @

edit 顶折

纠问

v-on 还可以缩写为 @
原来写法：

缩写之后：

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<div id="div1">
 
  <div>一共点击了  {{clickNumber}}次</div>  
  <button @click="count">点击</button>
 
</div>
  
<script>
  
new Vue({
      el: '#div1',
      data: {
    	  clickNumber:0
      },
      methods:{
    	  count: function(){
    		  this.clickNumber++;
    	  }
      }
    })
  
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 3 :

事件修饰符

edit 顶折

纠问

vue.js 还提供了各种事件修饰符来方便开发者使用。

.stop
.prevent
.capture
.self
.once

这些都是什么用呢？接下来就会一一展开

步骤 4 :

冒泡这件事

edit 顶折

纠问

事件修饰符里面有几个都是关于冒泡的，那么什么是冒泡呢? 简单的说就是父元素里有子元素，如果点击了子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。

尝试点击下面的任意一个 div，就会观察到冒泡现象

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<style type="text/css">
   * {
       margin: 0 auto;
       text-align:center;
       line-height: 40px;
   }
   div {
       width: 100px;
       cursor:pointer;
   }
   #grandFather {
       background: green;
   }
   #father {
       background: blue;
   }
   #me {
       background: red;
   }#son {
        background: gray;
    }
</style>
    
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
            father
            <div id="me" v-on:click="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>

</div>
  
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

</div>
  
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

渲染中渲染完成

效果

步骤 5 :

事件修饰符阻止冒泡 .stop

edit 顶折

纠问

在me上的click后面加一个 .stop，那么冒泡到了这里就结束了，就不会冒到father上面去了。
<div id="me" v-on:click.stop="doc">

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<style type="text/css">
   * {
       margin: 0 auto;
       text-align:center;
       line-height: 40px;
   }
   div {
       width: 100px;
       	cursor:pointer;
   }
   #grandFather {
       background: deeppink;
   }
   #father {
       background: pink;
   }
   #me {
       background: hotpink;
   }#son {
        background: #ff4225;
    }
</style>
    
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
            father
            <div id="me" v-on:click.stop="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>

</div>
  
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 6 :

事件修饰符优先触发 .capture

edit 顶折

纠问

在father 上增加一个.capture
<div id="father" v-on:click.capture="doc">
那么当冒泡发生的时候，就会优先让father捕捉事件。
点击son或者me的时候，都会优先触发它

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<style type="text/css">
   * {
       margin: 0 auto;
       text-align:center;
       line-height: 40px;
   }
   div {
       width: 100px;
       	cursor:pointer;
   }
   #grandFather {
       background: deeppink;
   }
   #father {
       background: pink;
   }
   #me {
       background: hotpink;
   }#son {
        background: #ff4225;
    }
</style>
    
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click.capture="doc">
            father
            <div id="me" v-on:click="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>

</div>
  
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 7 :

事件修饰符只有自己能触发，子元素无法触发.self

edit 顶折

纠问

修改father,增加 .self
<div id="father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生。

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<style type="text/css">
   * {
       margin: 0 auto;
       text-align:center;
       line-height: 40px;
   }
   div {
       width: 100px;
       	cursor:pointer;
   }
   #grandFather {
       background: deeppink;
   }
   #father {
       background: pink;
   }
   #me {
       background: hotpink;
   }#son {
        background: #ff4225;
    }
</style>
    
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click.self="doc">
            father
            <div id="me" v-on:click="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>

</div>
  
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 8 :

事件修饰符只能提交一次 .once

edit 顶折

纠问

修改father,增加 .once
<div id="father" v-on:click.once="doc">
这样father点击一次之后，就不会再监听到click了，但是有意思的是，grandFather还能监听到~

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<style type="text/css">
   * {
       margin: 0 auto;
       text-align:center;
       line-height: 40px;
   }
   div {
       width: 100px;
       	cursor:pointer;
   }
   #grandFather {
       background: deeppink;
   }
   #father {
       background: pink;
   }
   #me {
       background: hotpink;
   }#son {
        background: #ff4225;
    }
</style>
    
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click.once="doc">
            father
            <div id="me" v-on:click="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>

</div>
  
<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 9 :

事件修饰符阻止提交 .prevent

edit 顶折

纠问

通过在 click 后面添加 .prevent 可以阻止页面刷新。

@click.prevent="jump"

也可以直接用@click.prevent后面不跟函数

@click.prevent

注：只有超链和form这种会导致页面刷新的操作，.prevent 才有用。普通的不导致页面刷新的按钮，加上这个没有任何变化。
注：跳转到 12306.com 后，用 F5 刷新页面返回。。。

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
  
<div id="div1">
  
  <a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a>
  
  <br>
  <a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
  <br>
  <a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a>
  
  <br>
  <br>
  <form @submit="jump" action="http://12306.com">
  	<button type="submit">正常的form</button>
  </form>
  <form @submit.prevent="jump" action="http://12306.com">
  	<button type="submit">prevent jump()之后的form</button>
  </form>
  <form @submit.prevent action="http://12306.com">
  	<button type="submit">纯prevent之后的form</button>
  </form>
  
</div>
   
<script>
   
new Vue({
      el: '#div1',
      data: {
      },
      methods:{
    	  jump:function(){
    		  alert("jump()函数被调用");
    	  }
      }
    })
   
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

Vue.js系列教材（一）- 简介

Vue.js系列教材（三）- vue.js 中使用 v-if 条件语句实例

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2023-01-09 .prevent

gkk	关于前端部分-Vue.js-监听事件的提问 http://12306.com好像打不开了，我换成了百度就看出效果了。 .prevent修饰符看不到效果的可以自己改一个网站试试。

1 个答案

Shu_Enryu
答案时间：2023-11-30

确实

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-05-27 为什么要这样写，一条长的代码，大家都看不懂，改进一下可以吗？

一叶秋梦	关于前端部分-Vue.js-监听事件 -事件修饰符的提问很多地方都有，可以改进一下吗 <br data-filtered="filtered">.stop<br data-filtered="filtered">.prevent<br data-filtered="filtered">.capture<br data-filtered="filtered">.self<br data-filtered="filtered">.once<br data-filtered="filtered">

1 个答案

papalee
答案时间：2021-10-09

...换个浏览器试试？

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-08-13 v-on:click=""改成@click="" 会报错啊

2020-07-19 改成@click会报错啊

2020-03-30 vue里面也是单引号‘’和双引号“”可以混用的吗

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 9 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Vue.js-监听事件的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图

v-on 监听事件

v-on 缩写为 @

事件修饰符

冒泡这件事

事件修饰符 阻止冒泡 .stop

事件修饰符 优先触发 .capture

事件修饰符 只有自己能触发，子元素无法触发.self

事件修饰符 只能提交一次 .once

事件修饰符 阻止提交 .prevent

事件修饰符阻止冒泡 .stop

事件修饰符优先触发 .capture

事件修饰符只有自己能触发，子元素无法触发.self

事件修饰符只能提交一次 .once

事件修饰符阻止提交 .prevent