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. Activiti5.10简易教程一

    Activiti5.10简易教程一 一搭建环境 1.1   JDK 6+ activiti 运行在版本 6 以上的 JDK 上.转到 Oracle Java SE 下载页面,点击按钮“下载 JDK ” ...

  2. JSP内置对象之request对象【学习笔记】

    request对象是JSP中重要的对象,每个request对象封装着一次用户的请求,并且所有的请求参数都被封装在request对象中,因此request对象是获取请求参数的重要途径. 一.获取请求头与 ...

  3. 关于PHP的引用赋值

    应用赋值,可以改变之前的变量的值! 可以间接的做到,在变量未申明的时候!就可以获取它的值!

  4. FFT NNT

    算算劳资已经多久没学新算法了,又要重新开始学辣.直接扔板子,跑...话说FFT算法导论里讲的真不错,去看下就懂了. //FFT#include <cstdio> #include < ...

  5. mac 下设置jdk 路径,设置hadoop 路径

    1. touch ~/.bash_profile  创建一个文件 2.vim ~/.bash_profile JAVA_HOME=/Library/Java/JavaVirtualMachines/j ...

  6. TJpgDec使用说明

    TJpgDec模块应用说明 [TOC] 怎么使用 首先,你应该构建和运行如下所示示例程序.这是一个典型的使用TJpgDec模块,它有助于调试和缩小问题. 解码会话分为两个阶段.第一阶段是分析JPEG图 ...

  7. 51Nod 算法马拉松21(迎新年)

    这次打算法马拉松是在星期五的晚上,发挥还算正常(废话,剩下的题都不会= =). 讲讲比赛经过吧. 8:00准时发题,拿到之后第一时间开始读. A配对,看上去像是二分图最大权匹配,一看范围吓傻了,先跳过 ...

  8. IIS 配置MVC项目路由中以api结尾的接口

    公司的接口,前端框架是MVC,路由里面对接口配置的路径是以api结尾的,结果之间在iis上访问不了,研究了半天成功了,整理下,以免下次再忘. 路由配置RouteConfig routes.MapRou ...

  9. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  10. 在一个aspx或ashx页面里进行多次ajax调用

    在用ajax开发asp.net程序里.利用ashx页面与前台页面进行数据交互.但是每个ajax交互都需要一个ashx页面.结果是项目里一大堆ashx页面.使项目难以管理.现在我们就想办法让一个ashx ...