javascript - Why should Vue keyboard events be added to native?

Question

<template>

<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
         class="demo-ruleForm login-container" >
    <h3 class="title">系统登录</h3>
    <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
    </el-form-item>

    <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;"  @click.native.prevent="handleSubmit2" :loading="logining" >登录
        </el-button>
    </el-form-item>
</el-form>

</template>

@keyup.enter must be added here to take effect.

Answer 1

Because your @keyup.enter is written on an encapsulated component
If you write it on an input, you don’t need .native
As for why, please refer to the vue documentation

Answer 2

Methods used to bind native events to components

Answer 3

@ is actually the abbreviation of v-on, and v-on is an API interface that encapsulates Vue’s event system.

Vue’s official documentation points out that Vue uses its own event delivery mechanism. Events such as @click are encapsulated by Vue. Therefore, additional identifiers are only needed in some cases where native DOM events are actually handled.

Answer 4

Sink, sink...