v-on

在Vue中，会经常用到v-on去完成事件的绑定，若它是用在普通元素上，就是用来监听原生的DOM事件，而如果是用在自定义元素的组件上时，它可用来监听子组件触发的自定义事件。 比如：

//原生DOM事件
<div @click='xxx'> </div>
<div @keypress='yyy'> </div>

//监听自定义事件
<Note @update:value='aa'/> 

directive

那v-on是如何去绑定的事件监听器呢？在这之前需要先了解下directive的使用。如果说v-on,v-bind是vue自带的指令,那么directive的功能就是去完成自定义指令的创建
directive可以实现全局和局部指令的定义。具体格式如下：

// 全局指令--任意组件都能用到
Vue.directive('x',directiveOptions)

//局部指令--即在对应的组件内部定义，此指令也只有这个组件能够使用
export default{
    directives:{
        y:directiveOptions,
        x:directiveOptions
    }
}

具体实现:

了解完格式之后，就来具体看看如何自定义简易版的v-on功能。

假设我有这样的一个指令v-on2,它的功能是监听元素的点击事件，然后在事件触发时去执行函数hi.这该如何实现 其实分析下来我们要注意以下几点:

1：如何获取到`v-on2`监听到的具体是啥事件？
2：又如何知道对应事件后所赋的值是什么？

<script>

export default{
    directives:{
        on2:{
            bind(el,binding,vnode,oldVnode){}, //类似created
            inserted(参数同上){}, //类似mounted
            update(参数同上){}, //类似updated
            componentUpdated(参数同上){},
            unbind(参数同上){}, //类似destroyed
        }
    }
}

</script>

对应的钩子函数括号内参数的作用为：

我们这里选择在inserted这个阶段完成事件的绑定，根据上图可知，有关事件的绑定详情可通过binding属性来得到。

而从下图的这个打印结果来看，我们可以通过arg和value属性来分别得到所监听的事件和赋给事件的值。

最终代码如下：

这就是实现简易版的v-on的过程