day02 键盘事件 keydown ->keypress->keyup和键盘事件修饰符
键盘事件
事件触发顺序：keydown - > keypress - > keyup
@keydown.enter 回车
@keydown.left 左键
@keydown.right 右键
@keydown.up 上键
@keydownp.down 下键
@keydown.delete 删除键
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0 day2</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
[v-cloak]{display: none;}
*{margin:0;padding: 0;}
body{font-size: 16px;color: black;}
a{text-decoration: none; color: black;}
#app{}
#app form p label{
display: inline-block;
width: 64px;
height: 20px;
text-align: right;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- -->
<p @click.once="once">{{msg}}</p>
<!-- -->
<p>
<input type="text" name="" @keydown.enter="keyEnter"></input>
</p>
</div>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
filters:{
// 码值表
},
methods:{
keyEnter:function(){
console.log("Enter");
},
once:function(){
// 签到 一天点击一次
console.log("once");
},
hander:function(){
alert(this.msg)
}
}
});
}
</script>
</body>
</html>