vue.js 的事件绑定为何有些无效果

为什么无法触发鼠标覆盖和键盘事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件绑定测试</title>
    <style type="text/css" rel="stylesheet">
        body {
            margin: 0;
        }
        .gen {
            width: 100px;
            height: 100px;
            border: solid 0.1px #122b40;
        }
        .isAlive {
            background-color: green;
        }
    </style>
</head>
<body id="map" style="width: 100%;overflow: hidden;">

<div class="gen" @hover="onhover" @keyup.enter="enter" @click="onclick"></div>


<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el: '#map',
        data: {},
        methods :{
            onclick : function(e){
                alert("click");
            },
            onhover : function(e){
                alert("hover");
            },
            enter : function(e){
                alert("enter");
            }
        }
    })

</script>
</body>
</html>

事件中没有hover，可以使用mouseover或者mouseenter替代。要监测回车，建议把div换成input。
MDN 事件类型一览表

【热门文章】