Vue事件处理

    Vue.js提供了事件处理机制，事件监听使用v-on指令作为DOM事件来处发JavaScript代码。通常情况下需要编写监听事件，方法事件处理器，内联事件处理器。

1.监听事件

    监听事件直接把事件写在v-on指令中.

    

<div id= "app">
   <button v-on:click="count = count + '添加事件'">添加</button>
   <p>{{count}}</p>
</div>

<script>
   var examplel = new Vue({
     el:"#app",
     data:{
       count:"所添加元素"
     }
   })
</script>

2.方法事件处理器

    在开发过程中，事件的处理方法都很复杂，所以v-on是不能直接写的，需要吧v-on接收一个定义方法来调用。

    

<div id="app">
  <button v-on:click="clickPlay">clickPlay</button>
</div>

<script>
   var app = new Vue({
       el:"#app",
       data:{
         name:"元素"
       },
       methods:{
          clickPlay:function(){
             alert(this.name + '方法被调用')
          }
       }
   })
</script>

3.内联事件处理器

    上述已经定义了方法事件处理器，但是要想传递参数，就需要内联JavaScript语句，这种方法被称为内联事件处理器。

<div id="app">
   <button v-on:click="me('我说对的')">本人</button>
   <button v-on:click="you('你说对的')">对方</button>
   <br>本人说:{{me}}
   <br>对方说:{{you}}
</div>

<script>
  var app = new Vue({
    el:"#app",
    data:{
      me:"",
      you:""
    },
    methods:{
     me:function(message){app.me = message},
     you:function(message){app.you = message}
    }
  })
</script>

    点击按钮之后，会显示对方说的话。

    然而在内联语句中可以用特殊的变量$event把它传入方法，以此来访问原生的DOM事件。

<button v-on:click="funName('Vue.js',$event)"></button>

methods:{
  funName:function(msg,event){event.preventDefault()}
}

4.修饰符

    

<a v-on:click.stop="doThis">阻止单击事件冒泡</a>
<form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>
<a v-on:click.stop.prevent="doThat">修饰符可以串联</a>
<from v-on:submit.prevent>只有修饰符</from>
<div v-on:click.capture="doThis">添加事件监听时使用事件捕获模式</div>
<div v-on:click.self="doThat">只当事件在该元素本身触发时触发回调</div>
<a v-on:click.once="doThis">单击事件将只会触发一次</a>

5.按键修饰符

1. .enter
2. .tab
3. delete
4. .esc
5. space
6. up
7. down
8. left
9. right

    

<input v-on:keyup.enter="submit">
或者缩写
<input @keyup.enter="submit">

6.修饰键

1. .ctrl
2. .alt
3. .shift
4. .meta

<input @keyup.alt.65="clear">