內容概要：

常用指令二

一、常用指令二

1. 事件執行   v-on  或  @

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

示例：直接在指令中寫js程式碼

<template>
  <div>
    <button @click="num += 1">點選加一</button>
    <p>點選數：{{num}}</p>
  </div>
</template>


<script
 
>
  export default {
    name: "app",
    data() {
      return {
        num:0
      }
    },
  }
</script>

結果：

1.1 事件處理方法：

然而許多事件處理邏輯會更為複雜，所以直接把 JavaScript 程式碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要呼叫的方法名稱。

在script標籤中，有一個methods專門用來存放我們定義的方法的。

示例：

<template>
  <div>
    <
 
button @click="numAdd()">點選加一</button>
    <p>點選數：{{num}}</p>
  </div>
</template>


<script>
  export default {
    name: "app",
    data() {
      return {
        num:0
      }
    },
    methods:{
      numAdd(){
        this.num += 1
      }
    }
  }
</script
 
>