Vue學習之路7-v-on指令學習之簡單事件綁定
阿新 • • 發佈：2018-07-24
調用 pan spl onerror reset ima 簡單 rip 指令
前言
在JavaScript中任何一個DOM元素都有其自身存在的事件對象，事件對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置和鼠標按鈕的狀態等。事件通常與函數結合使用，函數不會在事件發生前被執行。在JavaScript中常見的事件句柄（Event Handlers）主要有：
| 屬性名 | 描述(對應事件發生在何時...) |
| onabort | 圖像的加載被中斷 |
| onchange | 域的內容被改變 |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄 |
| onfocus | 元素獲得焦點 |
| onkeypress | 某個鍵盤按鍵被按下並松開 |
| onload | 一張頁面或一幅圖像完成加載 |
| onmousemove | 鼠標被移動 |
| onmouseover | 鼠標移動到某元素之上 |
| onreset | 重置按鈕被點擊 |
| onselect | 文本被選中 |
| onunload | 用戶退出頁面 |
| onblur | 元素失去焦點 |
| onclick | 當用戶點擊某個對象時調用的事件名柄 |
| onerror | 在加載文檔或圖像時發生錯誤 |
| onkeydown | 某個鍵盤按鍵被按下 |
| onkeyup | 某個鍵盤按鍵被松開 |
| onmousedown | 鼠標按鈕被按下 |
| onmouseout | 鼠標從某個元素移開 |
| onmouseup | 鼠標銨鍵被松開 |
| onsubmit | 提交按鈕被點擊 |
| onresize | 窗口或框架被重新調整大小 |
v-on指令
作用：監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
用法：v-on綁定的事件函數一般都寫在methods對象中,使用步驟如下：1、事件綁定，2、事件實現，3、事件觸發。
v-on指令無參形式的click事件綁定：
全寫代碼如下：
1 <template> 2 <div> 3 <p class="title1">{{title}}</p> 4 <div class="View Codediv1"> 5 <button v-on:click="clickme" >{{msg}}</button> 6 </div> 7 </div> 8 9 </template> 10 11 <script> 12 export default { 13 name: ‘v-on‘, 14 data() { 15 return { 16 msg: ‘點擊我‘, 17 title: ‘v-on指令學習‘ 18 } 19 }, 20 methods:{ 21 clickme:function(){ 22 alert("hello"); 23 } 24 } 25 } 26 </script> 27 28 <style scoped> 29 .title1 { 30 text-align: left; 31 } 32 .div1{ 33 float: left; 34 } 35 </style>
簡寫代碼如下：
1 <template> 2 <div> 3 <p class="title1">{{title}}</p> 4 <div class="div1"> 5 <button @click="clickme" >{{msg}}</button> 6 </div> 7 </div> 8 9 </template> 10 11 <script> 12 export default { 13 name: ‘v-on‘, 14 data() { 15 return { 16 msg: ‘點擊我‘, 17 title: ‘v-on指令學習‘ 18 } 19 }, 20 methods:{ 21 clickme(){ 22 alert("hello"); 23 } 24 } 25 } 26 </script> 27 28 <style scoped> 29 .title1 { 30 text-align: left; 31 } 32 .div1{ 33 float: left; 34 } 35 </style>View Code
示例結果如下：
v-on指令有參形式的click事件綁定：參數的數量和形式可根據實際情況傳入，簡單代碼示例如下：
1 <template> 2 <div> 3 <p class="title1">{{title}}</p> 4 <div class="div1"> 5 <button @click="clickme(‘我是中文參數‘,‘woshiyingwencanshu‘,$event)" >{{msg}}</button> 6 </div> 7 </div> 8 9 </template> 10 11 <script> 12 export default { 13 name: ‘v-on‘, 14 data() { 15 return { 16 msg: ‘點擊我‘, 17 title: ‘v-on指令學習‘ 18 } 19 }, 20 methods:{ 21 clickme(msg1,msg2,event){ 22 console.log(msg1); 23 console.log(msg2); 24 console.log(event); 25 } 26 } 27 } 28 </script> 29 30 <style scoped> 31 .title1 { 32 text-align: left; 33 } 34 .div1{ 35 float: left; 36 } 37 </style>View Code
示例結果如下：
Vue學習之路7-v-on指令學習之簡單事件綁定