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指令學習之簡單事件綁定