vue之事件处理 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">

  <h2>绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('qingmu')">test2</button>
<button @click="test3($event)">test3</button>
<button @click="test4(123,$event)">test4</button>

  <h2>事件修饰符</h2>
<div style="width: 200px;height: 200px;background-color: red" @click="test5">
  <div style="width: 100px;height: 100px;background-color: blue" @click.stop="test6"></div>
</div>

  <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

  <h2>按键修饰符</h2>
  <input type="text" @keyup.65="test8">
  <input type="text" @keyup.enter="test8">

</div>


<script src="../js/vue.js"></script>
<script>
  new Vue({
    el:'#test',
    data:{
      test1(){
        alert('test1')
      },
      test2(msg){
        alert(msg)
      },
      test3(event){
        alert(event.target.innerHTML)
      },
      test4(msg,event){
        alert(msg+event.target.innerHTML)
      },
      test5(){
        alert("out")
      },
      test6(event){
        // event.stopPropagation();
        alert("inner")
      },
      test7(){
        alert('test7')
      },
      test8(event){
        // if(event.keyCode==65){
          alert(event.target.value+'...'+event.keyCode)
        // }
      }
    }
  })
</script>
</body>
</html>
posted @ 2021-07-11 23:46  King-DA  阅读(14)  评论(0)    收藏  举报