No.60 Vue---事件处理

一、事件处理

1.1 监听事件（添加事件）

• 我们可以使用 v-on 指令 (通常缩写为 @ 符号)来监听 DOM 事件，并在触发事件时执行一些JavaScript。用法为v-on:click="methodName”或使用快捷方式 @click="methodName”.

<template>
    <div>
      <button v-on:click="counter += 1">點擊：counter = {{ counter }}</button>
    </div>
</template>

<script>
export default {
  data(){
    return{
      counter:1,
    }
  }
}
</script>

 1.2 事件处理方法

• 然而许多事件处理逻辑会更为复杂，所以直接把JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<template>
    <div>
      <p>{{message }}</p>
      <button @click="clickHandle">按鈕</button>
    </div>
</template>

<script>
export default {
  data(){
    return{
      message:"消息通知",
    }
  },
  methods:{
    clickHandle(){
      //在事件中，讀取data中的屬性，是需要通過this. 屬性
      this.message = "消息被撤回了"
    }
  }
}
</script>

　　

1.3 内联处理器中的方法

• 这是官方的翻译称呼，其实我们可以直接叫他"事件传递参数"。