方法事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="greet">greet</button> //  点击事件  运行greet  方法
    </div>

</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var example2=new Vue({  // 创建  vue实例
        el:‘#app‘,
        data:{
            name:"Vue.js"
        },
        methods:{   //  方法
            greet:function(event){   //  函数 greet
                alert("hello"+this.name+‘!‘)  //  this.name   指的是 data里的name
                if(event){   //  形参  调用函数的对象
                    alert(event.target.tagName)   //  弹出调用该函数对象的  标签名
                }
            }
        }
    })

</script>
</html>

时间： 2024-08-24 00:29:37

方法事件处理器的相关文章

关于vue.js中事件处理器的练习

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件处理器</title></head><body>   <div id="app-1">

事件处理器 1.监听事件可以用v-on指令监听DOM事件来触发一些js代码. 2.方法事件处理器许多事件处理的逻辑都很复杂,所以直接把js代码写在v-on指令中是不可行的.因此v-on可以接受一个定义的方法来调用 3.内联处理器方法除了直接绑定到一个方法,也可以用内联js语句有时也需要在内联语句处理器中访问原生DOM事件.可以用特殊变量$event把它传入方法. <button v-on:click="warn('Form cannot be submitted yet.', $e

vue之事件处理器

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 监听事件可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次.</p> </div> var

Qt中事件处理的方法（三种处理方法，四种覆盖event函数,notify函数，event过滤，事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码，它是虚拟保护函数，可改写）

一.Qt中事件处理的方式 1.事件处理模式一首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是每个事件都对应同一个事件处理器,在该事件处理器中对不同的事件进行分类处理,这样的弊端有两点:第一,导致该事件处理器过于臃肿复杂:第二,这样不便于扩展,当系统新增加事件类型或者是我们需要使用到自定义事件时,就不得不修改Qt的源码来达到目的.所以Qt设计者的做法是针对不同类型的事件提供不同的事件处理器与之对

jQuery事件处理器的绑定及解除方法

前几天用bind()方法做事件绑定的时候发现还有其他几种事件绑定的方法,查阅了之后对比总结一下.内容详情请点链接~欢迎讨论拍砖~ .bind() .bind(eventType [, eventData], handler) v1.0 给被选元素绑定一个事件处理程序.eventType为事件类型如"click","submit","mousedown"等; eventData为传给handler的数据(注意变量作用域); handler为事

Vue 方法与事件处理器

方法与事件处理器方法处理器可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' },

Vue深度学习（4）-方法与事件处理器

方法处理器可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet">Greet</button> </div> Js代码 new Vue({ el: '#app', data: { message: '菜鸟教程!' }, methods:{ greet:function () { alert("OP"); } } }) 内联

vue事件处理器

1.监听事件可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次.</p> </div> var example1 = new Vue({ el: '#example

EventEmitter事件处理器中的this问题

JavaScript中的this是一个比较绕的问题,有非常非常多的文章在讲这件事,这里推荐一篇文章,看了这篇文章基本上就能弄明白了. 这篇文章讲了关于this的一个基本原则: 包含this的Function是当作方法调用的,还是当作函数调用? 如果是obj.func()这一类型的,那么就是方法调用,如果是func()这一类型的那么就是函数调用,在方法调用中,this就是obj本身的引用,如果是函数调用,情况就复杂了, 1. 浏览器内 1.1 严格模式下:undefined 1.2 非严格模式下: