Vue【第3章】：Vue常用指令二：事件和方法

内容概要：

常用指令二

一、常用指令二

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>