1.4.Vue 的模板事件-CSDN博客

Vue 的模板事件

1. 最常见和推荐的做法。将复杂的逻辑封装在 `methods` 中。

<!-- ✅ 正确：调用 methods 中的方法 -->
<button @click="handleClick">点击我</button>

new Vue({
  methods: {
    handleClick(event) {
      // 这里可以写任意语句
      if (this.isValid) {
        this.saveData();
      } else {
        console.log('数据无效');
      }
      // 其他复杂逻辑...
    }
  }
});

2. 使用内联表达式（简单逻辑）

对于非常简单的逻辑，可以直接在 @click 后写一个表达式。

<!-- ✅ 正确：使用表达式 -->
<button @click="counter++">增加计数</button>
<button @click="name = 'Vue'">设置名字</button>
<button @click="say('hi')">打招呼</button>

new Vue({
  data: {
    counter: 0,
    name: ''
  },
  methods: {
    say(message) {
      alert(message);
    }
  }
});

3. 使用内联函数调用（带参数或事件）

如果需要传递参数或访问原生事件对象，可以使用内联箭头函数或普通函数调用。

<!-- ✅ 正确：使用内联函数 -->
<button @click="(event) => deleteItem(id, event)">删除</button>
<button @click="() => { if (confirm('确定?')) doSomething() }">确认操作</button>

new Vue({
  data: {
    id: 1
  },
  methods: {
    deleteItem(id, event) {
      console.log('删除 ID:', id, '事件:', event);
    },
    doSomething() {
      // ...
    }
  }
});

错误的写法（直接写语句）

以下写法是无效的，会导致错误或不按预期工作：

<!-- ❌ 错误：直接写 if 语句 -->
<button @click="if (ok) { return message }">错误示例</button>

<!-- ❌ 错误：直接写 for 循环 -->
<button @click="for (let i=0; i<10; i++) { console.log(i) }">错误示例</button>

<!-- ❌ 错误：直接写 var 声明 -->
<button @click="var a = 1; a + 2">错误示例</button>

总结

在 v-on 事件绑定中，不能直接写 if, for, var 等 JavaScript 语句。
可以写：
- 方法调用：@click="methodName" (推荐用于复杂逻辑)
- 简单表达式：@click="counter++" 或 @click="name='Vue'"
- 内联函数调用：@click="(event) => handler(id, event)" 或 @click="() => { /* 简单逻辑 */ }"
复杂逻辑应始终放在 methods 选项中，并在事件绑定中调用该方法。

事件对象传递

处理事件时可以使用原生的 event 对象，也可以通过 $event 来引用这个对象。

1.直接使用 `event`

假设我们有一个按钮，点击时调用一个方法，并且该方法需要访问事件对象：

<button @click="handleClick">点击我</button>

对应的 Vue 实例方法可能如下所示：

new Vue({
  el: '#app',
  methods: {
    handleClick(event) { // 直接将事件对象作为参数传递
      console.log('事件类型:', event.type); // 输出 'click'
      console.log('事件目标:', event.target); // 输出触发事件的元素
    }
  }
});

在这个例子中，Vue 自动将触发事件的原生 DOM 事件对象作为第一个参数传递给 handleClick 方法。这种方式清晰直观，适合于不需要额外参数的情况。

2.使用 `$event`

$event 是 Vue 提供的一个特殊变量，用于在内联事件处理器表达式中显式地引用原生 DOM 事件对象。这种方式通常在你需要同时传递自定义参数并访问事件对象时使用。

示例

假设我们有一个按钮，点击时不仅要传递某个特定参数（比如 id），还需要访问点击事件的信息：

<button @click="deleteItem(id, $event)">删除</button>

对应的 Vue 实例：

new Vue({
  el: '#app',
  data: {
    id: 1
  },
  methods: {
    deleteItem(id, event) { // 同时接收自定义参数和事件对象
      console.log('要删除的ID:', id);
      console.log('事件对象:', event);
      // 可以在这里执行其他操作，例如阻止默认行为或停止事件冒泡
      event.stopPropagation();
    }
  }
});

在这个例子中，当我们点击按钮时，deleteItem 方法会被调用，并且会接收到两个参数：一个是 id，另一个是 $event，即原生的 DOM 事件对象。这里的关键点在于通过 $event 显式地将事件对象传递给了方法。

3.使用 内置的event

<button @click="(event) => deleteItem(id, event)">删除</button>

在第一节体验vue中,我们直接使用 event传递. 会有一个弊端.如果event是 data的成员.那么event就不能正确指向dom事件对象.

<button v-on:click="greet(event)">event测试</button>

new Vue({
    el: '#example',
    data: {
        event: 'Hello Vue!',
                
    },
    methods: {             
        greet: function (e) {
            alert(e);             
        }
    }
}

$event (Vue 特殊变量)：
- 这是 Vue.js 框架提供的一个特殊变量。
- 它总是指向被触发的原生 DOM 事件对象（例如 MouseEvent, KeyboardEvent 等）。
- 无论你在 v-on 指令的值中如何使用它，$event 的值就是那个原始的、由浏览器生成的事件对象。
event (JavaScript 变量/标识符)：
- 这只是一个普通的 JavaScript 变量名或标识符。
- 它的值取决于当前 JavaScript 作用域中名为 event 的变量是什么。
- 在 Vue 的模板表达式里，event 会被当作一个变量来查找。它可能指向：
  - window.event (如果存在)。
  - 一个在 Vue 实例 data 或 methods 中定义的名为 event 的变量