如何用vue 语法 给html元素绑定原生js DOM 事件

问题描述：

最近在使用vue全家桶开发页面，而且也是刚入门vue，很多vue的东西都是现学现用。 想要给一个html元素绑定DOM事件，我以前 肯定是用javascipt 的DOM 操作，但是既然项目用了vuejs ，我就想用vuejs实现一下，但是官方文档的这块写的非常简略，我就补充一下

解决问题：

首先需要分两种情况：

当想要绑定的元素是html原生标签，示例如下：

// 绑定点击事件
我是原生html标签

// 绑定鼠标相关事件
// 鼠标移动到元素上
我是原生html标签
// 鼠标移开元素
我是原生html标签
// 鼠标按键按下
我是原生html标签
// 鼠标按键松开
我是原生html标签

观察了这么多示例，应该已经发现，只要将 原生DOM事件的 on  去掉 ， 跟在v-on（@）:后面即可 。

如果是一个VUE组件的标签，上面的写法会失效，用法略有不同

// 绑定点击事件


// 鼠标移动到元素上

即在 事件后面加 .native ，即可对组件和子组件 进行事件绑定

------------------------------------------------------------------------------------------------------------------------------------

可以直接用js 语法处理，也可以写一个函数名，函数放在 vue对象 的methods 中，此函数可以获得一个 参数， 这个参数是原生js 的 event 对象 ，在函数中就可以对 event对象进行操作了。  附上 js DOM event的文档

我用过的api是  event.target （获得事件对应的html元素节点对象）