1. 函數(shù)綁定

可以用v-on:click="methodName"或者快捷方式 @click="methodName"綁定事件處理函數(shù)

@click="methodName()"也可以，@click="methodName"猜測(cè)是簡(jiǎn)寫(xiě)

  <div v-on:click="add">{{ count }}</div>
  <div @click="add">{{ count }}</div>

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },

2. 帶參數(shù)和$event 

可以直接在往事件綁定的函數(shù)里傳參數(shù)和$event 

<div @click="set(0, $event)">{{ count }}</div>

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

3. 多個(gè)函數(shù)綁定一個(gè)事件

多個(gè)函數(shù)直接用逗號(hào)分隔，這里即使是沒(méi)有入?yún)⒌暮瘮?shù)，也要加括號(hào)，否則不會(huì)執(zhí)行那個(gè)函數(shù)

比如<div @click="set(0, $event), log">{{ count }}</div> 只會(huì)執(zhí)行set

<div @click="set(0, $event), log()">{{ count }}</div>

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    log() {
      console.log("log---");
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

4. 事件修飾符

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form @submit.prevent></form>

<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div @click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div @click.self="doThat">...</div>

<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 能被用到自定義的組件事件上 -->
<a @click.once="doThis"></a>

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā)   -->
<!-- 而不會(huì)等待 `onScroll` 完成                   -->
<!-- 這其中包含 `event.preventDefault()` 的情況   -->
<!-- 尤其能夠提升移動(dòng)端的性能   -->
<div @scroll.passive="onScroll">...</div>

5. 按鍵修飾符 

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->
<input @keyup.enter="submit" />

<!-- 只有在 `key` 是 PageDown時(shí)調(diào)用 `vm.onPageDown()` -->
<input @keyup.page-down="onPageDown" />

6. 系統(tǒng)修飾鍵

事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)

• .ctrl
• .alt
• .shift
• .meta

<!-- 按住Alt， 按Enter -->
<input @keyup.alt.enter="clear" />

<!-- 按住Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 .exact 修飾符 

<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
<button @click.exact="onClick">A</button>

鼠標(biāo)按鈕修飾符

  <button @click.left="log('left cllilck')">鼠標(biāo)左擊</button>
  <button @click.right="log('right cllilck')">鼠標(biāo)右擊</button>
  <button @click.middle="log('middle cllilck')">鼠標(biāo)中擊</button>

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

最新評(píng)論