vue事件_v-on / @ / 绑定事件

3.3_vue指令-v-on

目标: 给标签绑定事件

• 语法
  • v-on:事件名=“要执行的少量代码”
  • v-on:事件名=“methods中的函数”
  • v-on:事件名=“methods中的函数(实参)”
• 简写: @事件名=“methods中的函数”

<template>
  <div>
      <h1>请输入您要购买的商品数量：{{count}}</h1>
      <!-- 1. v-on:事件名="要执行的少量代码"  简写：@事件名 ="要执行的少量代码"-->
      <!-- <button v-on:click="count+=1">点我加1</button> -->
      <button @click="count+=1">点我加1</button>
      <!-- 2. v-on:事件名="methods中的函数名"-->
      <!-- <button v-on:click="addFn">你点我啊</button> -->
      <button @click="addFn">你点我啊</button>
      <!-- 3. v-on:事件名="methods中的函数名(实参)" -->
      <!-- <button v-on:click="addCountFn(10)">给我来10个</button> -->
      <!-- <button v-on:click="addCountFn(10)">给我来10个</button> -->
      <!-- 这是函数的调用：实参 -->
      <button @click="addCountFn(10)">给我来10个</button>   
  </div>
</template>

<script>
export default {
    // data：放数据的
data () {
    return {
        count:0
    }
},
// methods：写函数/方法的
methods: {
    addFn() {
        // 💥注意：如果在js中要访问到data数据，需要写成this.***
        this.count++
    },
    // 函数定义的时候是：形参
    addCountFn(number){
        this.count+=number
    }
}
}
</script>

<style>

</style>

总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数