<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. delphi 写系统日志监控 转

    不久前写了个抓取网页内容的小程序,跑了一晚上,本以为早上起来都抓完了,谁知道程序死掉了,分析半天,才发现用tmemo来记录日志的信息太多了,越积越多,本来memo的容量就不大.对于无法控制信息量的日志 ...

  2. <a>标签的href属性

    <a> 标签的 href 属性用于指定超链接目标的 URL. 语法 <a href="value"> 属性值 值 描述 URL 超链接的 URL.可能的值: ...

  3. cocos日记

    n/2/2015 ADT       E:\All Setup\eclipse_past\Eclipse_plugins_ADT 15/2/2015 配置cocos win32 开发环境 链接:htt ...

  4. SheetOffice控件使用分享

    1.  控件属性及说明 Template:套用的模板目录(套用模板会使用到) 模板中必须包含书签: Body,这个是在代码中写死了的,是把当前文档的内容插入到模板的Body书签中. 如果使用印章,必须 ...

  5. sql server 判断相同值的数据

    举个栗子, 求出相同作者的书 select * from [books]  where author in (select author from [books] group by author ha ...

  6. JVM调优之jstack找出最耗cpu的线程并定位代码

    jstack可以定位到线程堆栈,根据堆栈信息我们可以定位到具体代码,所以它在JVM性能调优中使用得非常多.下面我们来一个实例找出某个Java进程中最耗费CPU的Java线程并定位堆栈信息,用到的命令有 ...

  7. HDU 2896 AC自动机 裸题

    中文题题意不再赘述 注意字符范围是可见字符,从32开始到95 char c - 32 #include <stdio.h> #include <string.h> #inclu ...

  8. 再探java基础——零碎基础知识整理

    1．java是解释型语言.java虚拟机能实现一次编译多次运行. 2．JDK(java software Development kit 软件开发包),JRE(java Runtime Environ ...

  9. myqltransactionRollbackexception deadlock found when trying to get lock

    linux 下远程连接mysq 命令: mysql -h "1.0.0.1" -u username -p 1 获 取锁等待情况 可以通过检查 table_locks_waited ...

  10. Linux驱动开发cdev驱动分层设计

    #ifndef MYDEV_H #define MYDEV_H #define DYNAMIC_MINOR 256 struct mydev{ const char *name; const stru ...