24. Understanding Event Binding - daniel-qa/Vue GitHub Wiki

24. Understanding Event Binding

在常规 JavaScript中, 我们可以通过 document､ get element by ID 来访问按钮｡

如果该按钮具有ID或查询选择器, 并选择找到的第一个按钮,

则可以使用 addEventListener 方法添加 EventListener｡

这就是我们在没有 Vue 的情况下, 在普通JavaScript中的做法｡

但是我们使用 Vue, 就不必这样做, 这样我们就不必一步一步地定义应该发生什么,

而是可以利用这种声明性方法, 只需声明我们的最终结果,

Vue 为我们提供了一种更简单的方法来向HTML元素添加 EventListeners｡

  • V-bind

V-bind 对于设置属性值很有帮助｡

  • V-on

为了添加 EventListeners, 我们有另一个指令, 这是 V-on 指令, ( v-on:click, 縮寫 @click )

V-on在冒号之后, 接收您要监听的事件｡

所有可以在HTML元素上监听的默认事件｡

click､ mouseenter､ mouseleave...

实际上任何你可以在普通 JavaScript中听到的东西｡

v-on:click="counter++"，这是JavaScript的最短形式, 我们要给counter加一｡

这只是JavaScript代码, 与Vue无关｡

这里有一件非常重要的事情,

很容易被忽视, 它告诉我们为什么我们使用Vue, 以及Vue有多强大｡

index.html

    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="counter++">Add</button>
      <button v-on:click="counter = counter -1">Reduce</button>
      <p>Result: {{ counter }}</p>
    </section>

app.js

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
    };
  },
});

app.mount('#events');

然后当计数器改变时, 访问该段落,

以更改显示在那里的值｡

而这正是Vue在幕后为你做的｡

这是Vue等框架的核心资产｡

您只需声明,您希望在何处使用EventListeners, 您希望在何处输出值, 以及您应该知道哪些值｡

而Vue我们所有的其余添加和管理这些侦听器, 更新幕后的计数器｡

最重要的是,检测计数器何时更改, 并在计数器更改时更新真实的呈现的页面中需要更新的部分｡

这就是Vue在幕后所做的工作｡**

这是Vue的一个核心功能｡

这种内置的反应性, 当你点击一个按钮时, 它会检测到计数器的变化,

然后它会在页面上找到使用计数器的地方, 用JavaScript在幕后更新用户看到的内容｡

我之所以强调这一点, 是因为了解Vue在这里做了什么非常重要, 希望了解为什么它非常令人惊奇,

并使我们作为开发人员的生活变得更加容易｡

⚠️ **GitHub.com Fallback** ⚠️