Vue - 事件修饰符、按键修饰符(三)

事件修饰符-防止事件传播 .stop

如果去掉.stop，会发现点击按钮弹出信息，点击确定，会再弹出'事件被传播'，这证明点击事件被传播，加上.stop，就解决了事件传播的问题

<div id="app">
   <div @click="toDo">
    <button @click.stop="doThis">click me</button>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    methods: function() {
      toDo: function(){
         alert('事件被传播');
      },
      doThis: function() {
        alert('点击了按钮')
      }
    }  
  })
</script>

事件修饰符-阻止默认事件.prevent

点击超链接后，默认行为是跳转到src指定的地址，加上.prevent则阻止了默认行为

<div id="app">
   <a @click.prevent="doThis">click me</a>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      doThis: function() {
        alert('点击了按钮')
      }
    }  
  })
</script>

事件修饰符-只执行一次事件.once

<div id="app">
   <div @click="toDo">
    <button @click.stop="doThis">点击+1{{count}}</button>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
        count : 0
    },
    methods: {
      doThis: function() {
          this.count++
      }
    }  
  })
</script>

按键修饰符-keyup.enter

keyup事件类型 enter回车键
也可以使用keyup.code code值为键盘按键值，13为回车键

<div id="app">
  <input type="text" @keyup.enter="keyUp"/>
  <input type="text" @keyup.13="keyUp"/>
</div>
<script>
new Vue({
  el: '#app',
  methods: {
    keyUp: function() {
      alert('按了回车键')
    }
  }
})
</script>