- Vue.js從入門到項目實踐(超值版)
- 聚慕課教育研發中心編著
- 341字
- 2022-07-29 14:27:46
5.2.1 方法及內聯處理器

通過v-on綁定實例選項屬性methods中的方法作為事件的處理器,v-on:后的參數接收所有的原生事件名稱。
提示:判斷是否為內聯處理器,其實很好區分,一個有括號,一個沒括號。沒括號的就是函數名;有括號的實際是一條JS語句,稱為內聯處理器。

運行效果如圖5-9所示。

圖5-9 內聯語句運行效果圖(一)
提示:v-on的縮寫形式為@,例如,@click="sayHello"。v-on支持內聯JavaScript語句,但僅限是一條語句的情況。

運行效果如圖5-10所示。

圖5-10 內聯語句運行效果圖(二)
提示:直接綁定methods函數和內聯JavaScript,都有可能需要獲取原生DOM事件對象。單擊圖5-10中的SayHello按鈕將彈出一個對話框,這就是綁定了一個單擊事件監聽,但調用的是另一個內置處理器方法sayFrom。

運行效果如圖5-11所示。

圖5-11 內聯語句多事件運行效果圖
提示:同一個元素上可以通過v-on綁定多個相同事件函數,執行順序為順序執行。