Vue系列七：事件处理

红太狼 2022-01-30 06:15 243阅读 0赞

1.  绑定监听:  
    v-on:xxx=“fun”  
    @xxx=“fun”  
    @xxx=“fun(参数)”  
    默认事件形参: event  
    隐含属性对象: $event
2.  事件修饰符:  
    .prevent : 阻止事件的默认行为 event.preventDefault()  
    .stop : 停止事件冒泡 event.stopPropagation()
3.  按键修饰符  
    .keycode : 操作的是某个keycode值的健  
    .enter : 操作的是enter键

<body>
    <div id="example">
    
      <h2>1. 绑定监听</h2>
      <button @click="test1">test1</button>
      <button @click="test2('abc')">test2</button>
      <button @click="test3('abcd', $event)">test3</button>
    
      <h2>2. 事件修饰符</h2>
      <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
      <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
      </div>
    
      <h2>3. 按键修饰符</h2>
      <input type="text" @keyup.13="test7">
      <input type="text" @keyup.enter="test7">
    
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#example',
        data: {
    
        },
        methods: {
          test1(event) {
            alert(event.target.innerHTML)
          },
          test2 (msg) {
            alert(msg)
          },
          test3 (msg, event) {
            alert(msg+'---'+event.target.textContent)
          },
    
          test4 () {
            alert('点击了链接')
          },
    
          test5 () {
            alert('out')
          },
          test6 () {
            alert('inner')
          },
    
          test7 (event) {
            console.log(event.keyCode)
            alert(event.target.value)
          }
        }
      })
    </script>
    </body>