<body>

        <div id="test">

            <button @click="changeColor('你好',$event)">点击我</button>

            <div style="height: 100px;width: 100px;" @mouseover="over('鼠标从我上面滑过',$event)">

            </div>

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: '#test',

                methods: {      //这里使用methods

                    changeColor: function (message, event) {

                        alert(message+event);    //弹出我被点击了,事件是[object MouseEvent]

                    },

                    over :function (message, event) {

                        alert(message+event);   //弹出鼠标从我上面滑过,事件是[object MouseEvent]

                    }

                }

            })

        </script>

    </body>

vue访问原生 DOM 事件的更多相关文章

  1. 原生dom事件注册和移除事件的封装

    var addEvent = (function() { var setListener; setListener = false; return function(el, ev, fn) { if ...

  2. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

  3. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  4. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  5. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  6. Vue DOM事件

    本文参考自:https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK* ...

  7. @click.native 会触发原生 click事件 vue

    @click.native 会触发原生 click事件 vue

  8. 【vue系列】Virtual DOM 真的比操作原生 DOM 快吗？

    一.前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重 ...

  9. Vue（四）事件和属性

    1. 事件 1.1 事件简写 v-on:click="" 简写方式 @click="" <button v-on:click="show&quo ...

随机推荐

  1. MapReduce Shuffle And Sort

    引言   MapReduce作出保证:进入每个Reducer的数据行都是有序的(根据数据行的键值进行排序).MapReduce将Mapper的输出进行排序并传递给Reducer作为输入的过程称为Shu ...

  2. app开发历程——android手机显示服务器端图片思路

    以前自己都不知道怎么去显示服务器端的图片,还好在apkbus论坛上找到一个特别简单的例子.虽然一天天忙忙碌碌,但是自己内心其实有一种想逃的心里,说不定哪天就会冒出来. 1.首先服务器端图片 这里的Im ...

  3. HDOJ 2089 不要62（打表）

    Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来 ...

  4. Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  5. MVC加载view的方式

    主要有 Html.ActionLink Html.RenderPartial Html.RenderAction Html.Partial Ajax.ActionLink load 浏览器对象模型 ( ...

  6. Runtime.exec()

    关于RunTime类的介绍: /** * Every Java application has a single instance of class * <code>Runtime< ...

  7. SQL语句查询结果额外加入一列序号自己主动添加

    sqlserver 能够用row_number函数实现 例如以下: SELECT *,row_number() OVER(ORDER BY score(列名) DESC) AS rank FROM s ...

  8. Java基础知识强化89：Date类之Data类概述及其方法

    1. Date类概述 类Date表示特定的瞬间,精确到毫秒 2. 构造方法 public Date():根据当前默认毫秒值创建日期对象 public Date(long date):根据给定的毫秒值创 ...

  9. Android（java）学习笔记253：ContentProvider使用之内容观察者02

    下面通过3个应用程序之间的交互说明一下内容观察者: 一. 如下3个应用程序为相互交互的: 二.交互逻辑图: 三.具体代码: 1.   16_数据库工程: (1)数据库帮助类BankDBOpenHelp ...

  10. Java基础知识强化24：Java中异常

    1.什么是异常 ?       Java程序运行中,常常会遇到非正常的现象,这种情况称为运行错误.根据性质可以分为错误和异常.Java程序中(无论谁写的代码),所有抛出(throw)的异常都必须从Th ...