27. Using the Native Event Object - daniel-qa/Vue GitHub Wiki

27. Using the Native Event Object

我们可以用v-on添加一个事件监听器,

当然, 我现在不想监听 click 事件, 而是监听每个击键｡

我们可以像使用 keyup 或 keydown 那样来实现, 它们都有自己的特殊行为｡

在输入HTML元素上监听的最佳事件是 input 事件｡

这是输入元素上可用的默认Dom事件, 与Vue无关｡

现在, 我们可以在这些双引号之间指定代码,

当输入事件被允许时, 这些代码应该执行, 这将是每次击键的情况｡

JavaScript中有一个很酷的行为, 而Vue中没有, Vue也可以使用它｡

当您加入事件侦听程式, 然后指向该事件发生时应该执行的函数时｡

该函数将自动获取一个参数｡

浏览器将确保提供此参数｡

例如, 它将给予发生此事件的HTML元素的信息, 即input元素｡

 setName(event) {
     this.name = event.targe.value;
 },

这使我们可以访问发生事件的元素｡

按 F12 觀察

现在, 这些是实际上在屏幕上重新呈现的部分｡

您可以看到, 只有代码中真正更改的部分才会重新呈现在屏幕上,

这一点很重要｡

如果 Vue会更新整个屏幕,

那么每当某个地方发生变化时, 这将不利于性能｡

相反,

Vue 非常聪明, 它看到这里的每一次击键, 只有名字会改变｡

因此, 我们保存了性能或获得了更好的性能

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue Basics</title>
        <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
              rel="stylesheet" />
        <link rel="stylesheet" href="styles.css" />
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script src="app.js" defer></script>
    </head>
      <body>
        <header>
          <h1>Vue Events</h1>
        </header>
        <section id="events">
          <h2>Events in Action</h2>
          <button v-on:click="add(10)">Add 10</button>
          <button v-on:click="reduce(5)">Reduce 5</button>
          <p>Result: {{ counter }}</p>
          <input type="text" v-on:input="setName">
          <p>Your Name: {{ name }}</p>
        </section>
      </body>
    </html>

app.js

const app = Vue.createApp({
    data() {
        return {
            counter: 0,
            name: ''
        };
    },
    methods: {
        setName(event) {
            this.name = event.target.value;
        },
        add(sum){
            this.counter = this.counter + sum;
        },
        reduce(sum) {
            this.counter = this.counter - sum;
        }

    }
  
});

app.mount('#events');

假设您有一个表单HTML元素,

其中有一些输入, 还有一个按钮, 显示“注册”等内容,

即使它位于 Vue控制的HTML部分中, 当您单击此按钮时, 此页面将重新加载!!｡

原因是浏览器默认的表单按钮是提交表单并向服务器发送HTTP请求｡

<form>
    <input type="text">
    <button>Sign Up</button>
</form>

当然, 现在我们还没有适当的代码来处理这个请求｡

我们将在本课程的稍后部分讨论这一点, 但通常对于Vue等框架, 您希望阻止此浏览器默认设置,

而是希望借助Vue应用程序中的Vue在JavaScript中手动处理此问题, 您希望读取用户输入, 验证它, 然后将其手动发送到后端服务器并存储在数据库中,

所以你想阻止浏览器默认的自动发送｡

现在, 有两种方法可以做到｡

您可以在这里侦听 submit 事件, 它也是一个默认的浏览器事件,

现在, 问题是我们仍然使用浏览器默认设置｡

如果我点击这个,

我会收到警告, 但是页面会重新加载, 当页面重新加载时,

这意味着我们会丢失所有的数据, 对吗？

如果我在这里有一个计数器, 我点击注册, 你会看到所有的数据都丢失了, 因为页面重新加载,

 <form v-on:submit="submitForm">
     <input type="text">
     <button>Sign Up</button>
 </form>

 methods: {
     submitForm() {
         alert('Submitted!');
     },
     ...

我们也可以调用 prevent default｡

这将告诉浏览器不应该提交表单, 我们不需要该浏览器的默认值｡

现在,

如果我重新加载, 我可以更改计数器, 单击“注册”,

我们会看到警报, 计数器仍然存在, 因为现在已阻止了浏览器默认设置｡

 methods: {
     submitForm(event) {
         event.preventDefault();
         alert('Submitted!');
     },

vue 有一個更聰明的做法，可以更節省時間

<form v-on:submit.prevent="submitForm">

但是如果你想让它对右键点击做出反应, 我们也可以在这里添加一个修饰符｡

<button v-on:click.right="reduce(5)">Subtract 5</button>

这告诉Vue,在这里, 你只想对右键单击做出反应｡

  • 監聽 input 上的 keyup, 這裡是監聽 enter

要按下 enter 後，才會被監聽到，進行渲染

<input type="text" v-on:input="setName" v-on:keyup.enter="confirmInput">
<p>Your Name: {{ confirmedName }}</p>

methods: {
    confirmInput() {
        this.confirmedName = this.name;
    },
  • v-once

这告诉Vue,

任何动态数据绑定, 比如这个元素上的插值, 都只应该计算一次｡

因此, 如果数据值在此之后发生变化, 在此处,

它将不会反映出来, 也不会更新｡

 <p v-once>Start Counter : {{ counter }}</p>
⚠️ **GitHub.com Fallback** ⚠️