- 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綁定多個相同事件函數,執行順序為順序執行。
推薦閱讀
- JSP網站開發詳解
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- Vue.js從入門到項目實踐(超值版)
- 眾妙之門:自由網站設計師成功之道
- Vue.js Web開發案例教程(在線實訓版)
- jQuery Web開發案例教程(在線實訓版)
- 速學速通:快學Flash動畫制作
- HTML+CSS+JavaScript網頁設計與布局:從新手到高手
- Premiere Pro CS6多功能教材
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- Photoshop熱門手機APP與網頁游戲界面設計從入門到精通
- 巧學巧用Dreamweaver CS6制作網頁
- Dreamweaver CC網頁設計從入門到精通(微課精編版)
- 從零開始讀懂Web3
- 別具光芒:CSS網頁布局案例剖析