看程序学Vue.js 2- VUE.JS 监听事件 V-ON 的用法

最新推荐文章于 2023-09-07 10:12:29 发布

涂家豪

最新推荐文章于 2023-09-07 10:12:29 发布

阅读量192

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/tujiahao1/article/details/94040622

版权

Vue.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

步骤 1 : v-on 监听事件

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

data: { clickNumber:0}

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

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

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

<button v-on:click="count">点击</button>

<script src="http://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>

步骤 2 : v-on 缩写为 @

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

<button v-on:click="count">点击</button>

缩写之后：

<button @click=“count”>点击

<script src="http://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>

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

.stop
.prevent
.capture
.self
.once

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

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

<script src="http://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>

步骤 5 : 事件修饰符阻止冒泡 .stop
在me上的click后面加一个 .stop，那么冒泡到了这里就结束了，就不会冒到father上面去了。

<div id="me" v-on:click.stop="doc">

<script src="http://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>

步骤 6 : 事件修饰符优先触发 .capture
在father 上增加一个.capture

<div id="father" v-on:click.capture="doc">

那么当冒泡发生的时候，就会优先让father捕捉事件。
点击son或者me的时候，都会优先触发它

<script src="http://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>

步骤 7 : 事件修饰符只有自己能触发，子元素无法触发.self
修改father,增加 .self

<div id="father" v-on:click.self="doc">

这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生。

<script src="http://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>

步骤 8 : 事件修饰符只能提交一次 .once
修改father,增加 .once

<div id="father" v-on:click.once="doc">

这样father点击一次之后，就不会再监听到click了，但是有意思的是，grandFather还能监听到~

<script src="http://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>

步骤 9 : 事件修饰符阻止提交 .prevent

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

@click.prevent=“jump”

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

@click.prevent

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

<script src="http://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>

涂家豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
看程序学Vue.js 2- VUE.JS 监听事件 V-ON 的用法

步骤 1 : v-on 监听事件<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> <div>一共点击了 {{clickNumber}}次</div> <button v-on:click="count">点...
复制链接

扫一扫

专栏目录