Vue學習之路7-v-on指令學習之簡單事件綁定

前言

在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對象中,使用步驟以下：一、事件綁定，二、事件實現，三、事件觸發。

v-on指令無參形式的click事件綁定：

全寫代碼以下：

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 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>

View Code

簡寫代碼以下：

 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

示例結果以下：

 

總結：v-on能夠綁定不少javascript事件，本文僅以click單擊事件爲例，後續會補充其餘事件的使用方法，若是本文有錯誤和不足之處，歡迎留言指出。