如何用vue 语法 给html元素绑定原生js DOM 事件
2018-01-23 12:42
656 查看
问题描述:
最近在使用vue全家桶开发页面,而且也是刚入门vue,很多vue的东西都是现学现用。 想要给一个html元素绑定DOM事件,我以前 肯定是用javascipt 的DOM 操作,但是既然项目用了vuejs ,我就想用vuejs实现一下,但是官方文档的这块写的非常简略,我就补充一下
解决问题:
首先需要分两种情况:
当想要绑定的元素是html原生标签,示例如下:
// 绑定点击事件
<p v-on:click="function">我是原生html标签</p>
// 绑定鼠标相关事件
// 鼠标移动到元素上
<p v-on:mouseover="function">我是原生html标签</p>
// 鼠标移开元素
<p v-on:mouseout="function">我是原生html标签</p>
// 鼠标按键按下
<p v-on:mousedown="function">我是原生html标签</p>
// 鼠标按键松开
<p v-on:mouseup="function">我是原生html标签</p>
观察了这么多示例,应该已经发现,只要将 原生DOM事件的 on 去掉 , 跟在v-on(@):后面即可 。
如果是一个VUE组件的标签,上面的写法会失效,用法略有不同
// 绑定点击事件
<component-name v-on:click.native="function"></component-name>
// 鼠标移动到元素上
<component-name v-on:mouseover.native="function"></component-name>即在 事件后面加 .native ,即可对组件和子组件 进行事件绑定
------------------------------------------------------------------------------------------------------------------------------------
可以直接用js 语法处理,也可以写一个函数名,函数放在 vue对象 的methods 中,此函数可以获得一个 参数, 这个参数是原生js 的 event 对象 ,在函数中就可以对 event对象进行操作了。 附上 js DOM event的文档
我用过的api是 event.target (获得事件对应的html元素节点对象)
最近在使用vue全家桶开发页面,而且也是刚入门vue,很多vue的东西都是现学现用。 想要给一个html元素绑定DOM事件,我以前 肯定是用javascipt 的DOM 操作,但是既然项目用了vuejs ,我就想用vuejs实现一下,但是官方文档的这块写的非常简略,我就补充一下
解决问题:
首先需要分两种情况:
当想要绑定的元素是html原生标签,示例如下:
// 绑定点击事件
<p v-on:click="function">我是原生html标签</p>
// 绑定鼠标相关事件
// 鼠标移动到元素上
<p v-on:mouseover="function">我是原生html标签</p>
// 鼠标移开元素
<p v-on:mouseout="function">我是原生html标签</p>
// 鼠标按键按下
<p v-on:mousedown="function">我是原生html标签</p>
// 鼠标按键松开
<p v-on:mouseup="function">我是原生html标签</p>
观察了这么多示例,应该已经发现,只要将 原生DOM事件的 on 去掉 , 跟在v-on(@):后面即可 。
如果是一个VUE组件的标签,上面的写法会失效,用法略有不同
// 绑定点击事件
<component-name v-on:click.native="function"></component-name>
// 鼠标移动到元素上
<component-name v-on:mouseover.native="function"></component-name>即在 事件后面加 .native ,即可对组件和子组件 进行事件绑定
------------------------------------------------------------------------------------------------------------------------------------
可以直接用js 语法处理,也可以写一个函数名,函数放在 vue对象 的methods 中,此函数可以获得一个 参数, 这个参数是原生js 的 event 对象 ,在函数中就可以对 event对象进行操作了。 附上 js DOM event的文档
我用过的api是 event.target (获得事件对应的html元素节点对象)
相关文章推荐
- Vue同一个dom元素如何绑定多个点击事件?
- 04、vue.js 之绑定事件
- Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?
- Vue.js中实现通过一个dom的事件,使得另一dom也触发事件
- vue.js绑定事件监听器示例【基于v-on事件绑定】
- 原生JS绑定滑轮滚动事件,兼容浏览器
- 如何实现对一个DOM元素进行深拷贝,包括它绑定的事件
- 原生js绑定事件 解绑
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
- vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件
- 如何用JS获取元素某一事件上绑定的所有Listener
- JS实现对DOM元素事件的绑定
- 原生js绑定事件方法简单封装
- js---JavaScript中的事件委托/事件代理,如何通过事件委托进行异步DOM事件监听
- DOM操作,控制HTML元素 (原生JS)
- 原生js绑定和解绑事件,兼容IE,FF,chrome
- 如何做到js绑定事件的同时不执行事件
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- js-dom装载后异步写入的内容,无法绑定到事件
- Vue.js数据绑定语法