vue 事件处理

我们可以使用 v-on 指令 (简写为 @)来监听 DOM 事件，并在事件触发时执行对应的JavaScript。用法:v-on:click="methodName"或 @click="handler"。

内联事件处理器

事件被触发时执行的内联JavaScript 语句(与 onclick 类似)

<template>
  <div>
    <button @click="num++">累加num</button>
    <p>{{ num }}</p>
  </div>
</template>

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

点击按钮数字就会加1

 

方法事件处理器 

 一个指向组件上定义的方法的属性名或是路径。

<template>
  <div>
    <button @click="addNum">累加num</button>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      num: 1
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    addNum(){
      this.num+=1
    }
  }
}
</script>