<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. hdu5126stars

    http://acm.hdu.edu.cn/showproblem.php?pid=5126 首先,对于一个询问,用容斥原理可以拆成8个询问,于是询问变成:给定一个四元组$(i,x_i,y_i,z_i ...

  2. 【模拟】XMU 1062 山东煎饼

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1062 题目大意: 已知金钱,和各面额钞票张数,问最少可以换成几张. 题目思路: [模拟 ...

  3. [Java] 垃圾回收机制 ( Garbage Collection ) 简介

    自动垃圾回收( Automatic Garbage Collection ) 自动垃圾回收,是指在堆(Heap)内存上分辨哪些对象还在被使用,哪些对象没有被使用,并清除没有被使用的对象.所以,这里的垃 ...

  4. JavaScript String 对象实例深入研究

    本文主要介绍并分析JavaScript中String对象的具体用法,以及和String对象相关的方法,方便开发者在JavaScript开发中更好地处理字符串. 1. 介绍 String 对象,对字符串 ...

  5. python_Opencv_使用Matplotlib模块

    使用Matplotlib模块 Matplotib 是python 的一个绘图库,里头有各种各样的绘图方法. 之后会陆续了解.先学习怎样用Matplotib 显示图像. 可以放大图像,保存图像. 安装M ...

  6. Context中嵌套<Environment>元素

    环境条目  可以在Context中嵌套<Environment>元素,配置命名的值,这些值作为环境条目资源(Environment Entry Resource),对整个web应用可见.比 ...

  7. android:ellipsize的使用

    EidtText和textview中内容过长的话自动换行,使用android:ellipsize与android:singleine可以解决,使只有一行. EditText不支持marquee 用法如 ...

  8. Laravel 4 Quick Tip: Custom Error Pages

    App::error(function($exception, $code) { switch ($code) { case 403: return Response::view('errors.40 ...

  9. 要缩小通过两个触摸点的观点(iOS)

    于AppDelegate.m档,创建一个视图控制器 #import "MAYAppDelegate.h" #import "MAYViewController.h&quo ...

  10. String,StringBuffer与StringBuilder的差别??

    String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...