vue事件

作者：偶然＼寥寂り发布日期:2025-10-16 浏览:50

// Vue 事件示例代码

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    // 定义一个方法，当按钮被点击时调用
    greet: function(event) {
      // `this` 在方法中指向 Vue 实例
      alert('Hello ' + this.message + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// HTML 部分
<div id="app">
  <!-- 使用 v-on 指令绑定 click 事件 -->
  <button v-on:click="greet">Greet</button>
</div>

// 解释说明：
// 1. `v-on:click="greet"`：使用 Vue 的 `v-on` 指令来监听按钮的点击事件，并在触发时调用 `greet` 方法。
// 2. `methods`：在 Vue 实例中定义了 `greet` 方法，该方法会在点击按钮时执行。
// 3. `event` 参数：在 `greet` 方法中可以通过参数 `event` 获取到原生的 DOM 事件对象。

上一篇：vue路由跳转打开新窗口

下一篇：vue项目运行命令