vue 監聽事件

v-on 監聽

<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>

v-on:click="count" 可以縮寫為@click="count"

事件修飾

.stop ,.prevent,.capture,.self,.once

冒泡事件

<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>

父元素里有 子元素， 如果點擊了 子元素, 那么click 事件不僅會發生在子元素上，也會發生在其父元素上，依次不停地向父元素冒泡，直到document元素。

stop 停止觸發

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

冒泡方法執行到此處就會停止 不會執行到父級了

capture 優先觸發

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

那么當冒泡發生的時候，就會優先讓father捕捉事件。

點擊capture 內部元素會優先觸發

self 自己觸發

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

只有自己點擊才會觸發

once 只觸發一次

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

如果觸發過會跳過

prevent

通過在click后面添加prevent 可以阻止頁面刷新

@click.prevent = "jump"

也可以直接,后面不跟函數

@click.prevent

只有超鏈和form這種會導致頁面刷新的操作，.prevent 才有用。 普通的不導致頁面刷新的按鈕，加上這個沒有任何變化。