Vue中v-on指令的簡單事件綁定的分析（附程式碼）

這篇文章跟大家介紹的文章內容是關於Vue中v-on指令的簡單事件綁定的分析（附程式碼），有很好的參考價值，希望可以幫助到有需要的朋友。

前言

在JavaScript中任何一個DOM元素都有其自身存在的事件對象，事件對象代表事件的狀態，例如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置和滑鼠按鈕的狀態等。事件通常與函數結合使用，函數不會在事件發生前執行。在JavaScript中常見的事件句柄（Event Handlers）主要有：

onchangeondblclick當使用者雙擊某個物件時所呼叫的事件句柄#onfocus元素獲得焦點onkeypress某個鍵盤按鍵被按下並鬆開#onload一張頁面或一幅圖像完成加載onmousemove滑鼠被移動#onmouseover滑鼠移到某元素之上onreset重設按鈕被點選#onselect文字被選取onunload使用者退出頁面onblur元素失去焦點 onclick當使用者點選某個物件時呼叫的事件名稱柄#onerror在載入文件或圖片時發生錯誤onkeydown某個鍵盤按鍵被按下#onkeyup某個鍵盤按鍵被放開onmousedown滑鼠按鈕被按下#onmouseout滑鼠從某個元素移開onmouseup滑鼠銨鍵被放開#onsubmit

屬性名稱	#描述(對應事件發生在何時...)
onabort	圖片的載入被中斷
onchange	網域的內容被改變

提交按鈕被點擊

onresize

視窗或框架被重新調整大小

# 

## 

 

 

 

 

 

 

 

 

# 

# 

 

 

 

 

 

 

# 

#v-on指令作用：監聽DOM 事件，並在觸發時執行一些JavaScript 程式碼。

用法：v-on綁定的事件函數一般都寫在methods物件中,使用步驟如下：1、事件綁定，2、事件實現，3、事件觸發。 v-on指令無參詞形式的click事件綁定：

全寫程式碼如下：

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  v-on:click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
    export default {
        name: &#39;v-on&#39;,
      data() {
          return {
            msg: &#39;点击我&#39;,
            title: &#39;v-on指令学习&#39;
          }
      },
      methods:{
        clickme:function(){
          alert("hello");
    }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

簡寫程式碼如下：

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(){
        alert("hello");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

範例結果如

v-on指令有參詞形式的click事件綁定：參數的數量和形式可根據實際情況傳入，簡單程式碼範例如下：

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme(&#39;我是中文参数&#39;,&#39;woshiyingwencanshu&#39;,$event)" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(msg1,msg2,event){
       console.log(msg1);
       console.log(msg2);
       console.log(event);
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

範例結果如下

#總結：v-on可以綁定很多javascript事件，本文僅以click點擊事件為例。 相關推薦：

######Vue中條件渲染的分析（附程式碼）############Vue中v- model指令的分析（附程式碼）#############

以上是Vue中v-on指令的簡單事件綁定的分析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！