技術標籤：前端vuevue

一、vue繫結事件

vue事件繫結v-on

• 原生的dom事件
• 元件自定義事件

#繫結原生dom事件
<div id="app">
  <button v-on:click="handle">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

#繫結自定義事件,通過元件內部 $emit('myEvent')觸發
<my-component v-on:myEvent=
 
"doSomething"></my-component>

#在自定義元件上繫結原生事件
<my-component v-on:click.native="doSomething"></my-component>

#繫結動態事件,eventName為例項中能夠訪問到的變數
<my-component v-on[eventName]="doSomething"></my-component>
<my-component @[eventName]="doSomething"
 
></my-component>

二、vue中的事件修飾符

• .stop(取消冒泡）
• prevent 取消預設事件
• once 只執行一次，執行完就銷燬
• passive 滾動事件允許預設行為和scroll不阻塞執行
• self （只有event.target 就是當前元素才執行）
• capture （捕獲階段執行）

2. 按鍵修飾符

• enter （ 回車觸發）
• tab （ tab鍵觸發）

3.使用案例

// 阻止單擊事件繼續傳播
<p `v-on:click.stop` = 'handler'></p>

<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent=
 
"onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>