05-Vue之本地指令v-on
阿新 • • 發佈：2021-01-06
1. v-on指令
- 作用：為元素繫結事件
- 用法：v-on: 事件名="方法名" 簡寫： @事件名="方法名" 注： 事件名無需寫on
- 方法內部可通過 this 關鍵字訪問data中的資料
- 完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='app'> <!-- v-on:事件='方法' --> <input type="button" value='v-on指令' v-on:click='doIt'> <!-- 簡寫 @事件='方法' --> <input type="button" value='v-on簡寫' @click='doIt'> <!-- 雙擊事件 --> <input type="button" value='雙擊事件' @dblclick='doIt'> <!-- 更改資料使用 this關鍵字 --> <div id='app' @click='changeMes'>{{mes}}</div> </div> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:'#app', data:{ mes:'加油！' }, methods:{ doIt:function(){ alert('大家好，我是測試小白！') }, changeMes:function(){ this.mes += "加油，海蠣子！" } } }) </script> </body> </html>