vue事件绑定指令

<template>
  <div>
    <!-- 简单的事件绑定 -->
    <button v-on:click="increment">点击我</button>
    <p>你点击了 {{ count }} 次</p>

    <!-- 使用修饰符阻止默认行为 -->
    <a href="https://vuejs.org" v-on:click.prevent="handleClick">Vue官网</a>

    <!-- 使用内联语句 -->
    <button v-on:click="count += 1">增加计数</button>

    <!-- 事件处理函数接收原生事件作为参数 -->
    <button v-on:click="greet('Hello Vue!')">打招呼</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    handleClick(event) {
      console.log('链接被点击，但不会跳转', event);
    },
    greet(message) {
      alert(message);
    }
  }
};
</script>

解释说明：

1. 简单的事件绑定：使用 v-on:click 绑定一个点击事件，当按钮被点击时，调用 increment 方法，增加 count 的值。
2. 使用修饰符阻止默认行为：v-on:click.prevent 用于阻止 <a> 标签的默认跳转行为，同时调用 handleClick 方法。
3. 使用内联语句：直接在 v-on:click 中写入表达式 count += 1，实现点击按钮后增加 count 的值。
4. 事件处理函数接收原生事件作为参数：greet 方法接收一个字符串参数，并通过 alert 显示该字符串。