（10）打鸡儿教你Vue.js

客官°小女子只卖身不卖艺 2021-09-20 13:48 199阅读 0赞

事件处理器

<div id="app">
      <button v-on:click="counter += 1">增加 1</button>
      <p> {
       { counter }} 次。</p>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })
    </script>

<div id="app">
       
      <button v-on:click="greet">Greet</button>
    </div>
     
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        name: 'Vue.js'
      },
    
      methods: {
        greet: function (event) {
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM 事件
          if (event) {
              alert(event.target.tagName)
          }
        }
      }
    })
    // 也可以用 JavaScript 直接调用方法
    app.greet() // -> 'Hello Vue.js!'
    </script>

<div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })
    </script>

event.preventDefault() 或 event.stopPropagation()

.stop
    .prevent
    .capture
    .self
    .once

<a v-on:click.stop="doThis"></a>
    
    <form v-on:submit.prevent="onSubmit"></form>
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    <form v-on:submit.prevent></form>
    
    <div v-on:click.capture="doThis">...</div>
    
    <div v-on:click.self="doThat">...</div>
    
    
    <a v-on:click.once="doThis"></a>

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">
    
    <input @keyup.enter="submit">

.enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

<p>
    <input @keyup.alt.67="clear">
    
    <div @click.ctrl="doSomething">Do something</div>

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[1240]: /images/20210724/8b72b60fa5d04c8ebaf9e5088c463f33.png
[1240 1]: /images/20210724/fd4405f7f7024d9eb04237c79c791cc3.png