方法与事件

事件处理方法

vue绑定事件比较简单，但是有个地方需要注意一下下：
如果方法中定义了参数，需要在绑定事件的地方带上括号，如果忘了加括号，默认传原生事件对象event 。
可以试着把下面第一个button 的 add 后面的括号去掉试试~

  <div id="app">
    <p> {{count}}</p>
    <button v-on:click="add()">点我每次加1 </button>
    <!-- 这里由于方法中有参数，所以需要带上括号，如果忘了加括号，默认传原生事件对象event -->
    <button v-on:click="add(10)">点我每次加10 </button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
         // 在 methods 对象中定义方法
        add : function (num){
          let temp = num || 1;
          this.count += temp
        }
      }
    })
  </script>

</body>

如果既想传参，又要访问原生DOM事件，可以用特殊变量 $event把它传入方法。

常见事件修饰符

.stop

阻止单击事件向上冒泡

  <div id="app">
    <div style="width: 100px;height: 100px;background: #ccc" 
         v-on:click="divClick">
      <button @click.stop="btnClick"> button </button>
      <!-- 没有加 stop 修饰符的时候，点击按钮，会先提示“button 被点击了”，再提示“div 被点击了” -->
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
       divClick: function(){
           alert('div 被点击了')
       },
        btnClick: function(){
           alert('button 被点击了') 
       },
      }
    })
  </script>

.self

只是作用在元素本身而非子元素的时候调用。
所以以下代码也可以达到与上例同样的效果：

 <div style="width: 100px;height: 100px;background: #ccc" 
         v-on:click.self="divClick"

.prevent

提交事件并且不重载页面。
每次提交表单都会重载页面，所以可以用.prevent修饰符阻止页面重载

   <form action="#" v-on:submit.prevent = "onSubmit">

或者

<form v-on:submit.prevent></form>

.once

只执行一次的方法

  <div id="app">
    <button @click="onceMethod">执行很多次</button>
    <button @click.once="onceMethod">只执行一次</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
       onceMethod: function(){
         this.count++ 
         alert('总共点击了' + this.count + '次')
       }
      }
    })
  </script>

按键修饰符

Vue 为最常用的按键提供了别名
全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right