1、内联方式：

A：将事件处理器绑定到一个方法中，以下所有事件都以click事件作为案例

注意：内联方式下事件处理器只能绑定一个方法，要是想要绑定多个方法，依旧还是使用js中的addEventListener方法进行绑定

B：与原生的js类似，不仅可以绑定到一个方法上，还可以使用内联js语句

2、点击事件绑定的方法，在Vue实例中，存放在method属性中

注意：methods中定义的方法内的this始终指向创建的Vue实例中

3、$event的应用：需要访问元素DOM事件，用其传入方法中

4、事件处理器中的修饰符

A：使用串联

B：只有修饰符而不绑定事件

C：.prevent  ==>  event.prventDefault()

　  .stop ==> event.stopPropagation()

　  .capture ==> 表示添加事件侦听器时采用capture即捕获模式

　　.self ==> 表示只当事件在该元素本身（而不是子元素）触发时触发回调

5、按键事件

6、v-on变更

Vue - 事件绑定的更多相关文章

  1. Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...

  2. vue事件绑定处理

    事件监听指令 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码,通常是触发一个函数,简写@ <template> <div id="app" ...

  3. vue事件绑定

    事件绑定 vue官方文档:<https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%A ...

  4. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  5. Vue之事件绑定

    Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分: <el-button type="pri ...

  6. vue for 绑定事件

    vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...

  7. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  8. vue 基础重要组件 模板指令 事件绑定

    组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...

  9. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

随机推荐

  1. 关于break语句如何结束多重循环的嵌套

    在Java中的break语句功能大体上同c语言, 用于循环语句中,表示结束当前循环. 但是有时候在循环嵌套语句中,仅仅靠一 个break语句想实现是不够的. 例: 如果想使sum在501时就直接输出, ...

  2. [Tomcat] Tomcat的classloader

    定义 同其他服务器应用一样,tomcat安装了各种classloader(classes that implement java.lang.ClassLoader) Bootstrap | Syste ...

  3. windows安装rabbitmq

    官网下载windows安装版本:http://www.rabbitmq.com/install-windows.html ,安装文件rabbitmq-server-3.6.5.exe 前提:安装erl ...

  4. axios基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  5. UnixBench-linux下的跑分软件

    UnixBench是一款开源的测试 unix 系统基本性能的工具,是比较通用的测试VPS性能的工具.UnixBench会执行一系列的测试,包括2D和3D图形系统的性能,测试的结果不仅仅是CPU,内存, ...

  6. C#微信公众号开发系列教程二（新手接入指南）

    http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可 ...

  7. static修饰符

    static修饰符表示静态的,可修饰字段.方法.内部类,其修饰的成员属于类,也就是说static修饰的资源属于类级别,而不是对象级别. static的正真作用:用来区别字段,方法,内部类,初始化代码块 ...

  8. 【Winform】使用BackgroundWorker控制进度条显示进度

    许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...

  9. kali 安装ss代理客户端的方法（纯属个人总结）

    1.声明版本,因为别的版本没测试过 2.下载客户端安装包 wget https://github.com/shadowsocks/shadowsocks/archive/master.zip 这个是代 ...

  10. python import, from xx import yy

    区别: 用import modulexx/packagexx.moduleyy是导入某一模块,如果想引用模块的内容(class, method,variables...)必须用全名,即 [module ...