Vue学习日记之基本指令v-on

   众所周知在JavaScript中要实现，用户和网站进行交互的行为，大部分是要通过事件来实现的。

  回忆一下，在原生的JavaScript中存在着DOM0级事件处理程序和DOM2级事件处理程序。

  DOM0级事件处理程序，首先要获取发生此事件的对象，再对事件进行处理，例如：

<!--DOM0级事件处理程序-->
<div>
    <button type="button" id="btn">点击</button>
</div> 
<script>
 var btn=document.getElementById('btn');
    btn.onclick=function () {
       alert("这是DOM0级事件处理");
   }
</script>

DOM2级事件处理程序，同样的要先获取此事件的对象，使用addEventListener()进行事件处理

<!--DOM2级事件处理程序-->
<div>
    <button id="btn2" type="button">点我</button>
</div>
<script>  
 var btn2=document.getElementById("btn2");
    btn2.addEventListener("click",function () {
        alert("Hello");
    })
</script>

从以上可以看出，无论是DOM0级还是DOM2级事件处理程序都是需要先获取对象，再进行事件处理，我们知道Vue的一个目的就是解决烦人的DOM操作，于是Vue推出了一个绑定事件的基本指令v-on，解放双手。

1、v-on是什么

   v-on是vue中的基本指令，用于绑定事件监听器，事件类型由参数决指定。

• 缩写为：@
• 普通元素为监听原始事件
• 自定义元素组件为监听自定义事件
• v-on:事件="事件函数"，我们需要在vue实例中定义放置函数的methods

  举个例子：

<div id="app" >
    <input type="button" value="按钮"  v-on:click="show">
</div>
<script>
    //这个Vm就是ViewModel，将Model中的数据转化成适合用户观看额数据模型，
   var Vm=new Vue({
       el:"#app",
       //这是M model 存取前端数据的地方
       data:{
           message:"我是message"
       },
       methods:{      //创建的methods为存放vue实例函数的地方
           show:function () {
               alert("Hello");
           }
       }
   });

运行结果：

如上所示，我们创建了一个按钮，使用v-on指令绑定基本事件click，事件处理函数为show，这个show我们在vue实例中创建一个methods存放它。

由于v-on太常用，所以在vue中定义了它的缩写形式：@，例如v-on:click="show"使用缩写形式为@click="show"

问题来了，假如我们想要实现多个事件绑定呢？

 

一种方法是使用多个v-on

<div id="app" >
    <input type="button" value="按钮"   v-on:focus="close" v-on:click="show">
</div>
<script>
    //这个Vm就是ViewModel，将Model中的数据转化成适合用户观看额数据模型，
   var Vm=new Vue({
       el:"#app",
       //这是M model 存取前端数据的地方
       data:{
           message:"我是message"
       },
       methods:{
           show:function () {
               alert("Hello");
           },
           close:function () {
               alert("第二个事件");
           }
       }
   });

这种方法似乎太过麻烦，我们可以使用一次性的v-on来实现。

<!--Vue事件处理-->
<div id="app" >
    <input type="button" value="按钮"   v-on="{click:show,focus:close}">
</div>
<script>
    //这个Vm就是ViewModel，将Model中的数据转化成适合用户观看额数据模型，
   var Vm=new Vue({
       el:"#app",
       //这是M model 存取前端数据的地方
       data:{
           message:"我是message"
       },
       methods:{
           show:function () {
               alert("Hello");
           },
           close:function () {
               alert("第二个事件");
           }
       }
   });

效果是一样的。但是这里的v-on不能用缩写形式。