这次讲红色框框。
方法与事件处理器;
方法处理器;
内联语句处理器;
事件修饰符;
按键修饰符;
为什么在HTML中监听事件?
1、v-on绑定事件

带参数

2、事件对象$event;
有时也需要调用事件对象$event,所以给事件对象起个名字$event,传入函数中。

阻止默认事件:event。preventdefault();
阻止冒泡 :event.stoProgation();
event.stopProgation不在派发事件。
终止事件在传播过程的捕获、目标处理或冒泡阶段进一部的传播。该节点上处理事件的处理,不能程序将被调用。
语法: event.progration();
该方法将停止事件的传播,阻止它被分派到其他Document节点,在事件传播的任何阶段都可以调用它。注意:虽然该方法不能阻止同一个Document节点上的其他事件被调用,但是它可以阻止把这个事件分派到其他节点。

3、事件修饰符。就是在事件的后面加上一个 ' . ' 加上修饰符
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation().尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理DOM事件细节会更好。
vue.js提供了2个事件修饰符:
(1).prevent 与 .stop。 修饰符 是 点打头的指令后缀。
(2).capture 添加事件时 使用capture捕获。
.self 只有当事件在该元素本身(而不是子元素)触发时 触发回调
注意:修饰符可以连缀。

另一个重要的是监听键盘按键
<input v-on:keyup.13="sub">
<input v-on:keyup.enter="sub">
enter\tab\delete\esc\space\up\down\left\rigt + 单字母 可用的按键名。

4、为什么在HTML中监听事件。
(1)、vue.js事件处理方法和表打死都严格绑定在当前使徒的ViewModel上。
(2)、无需再javascript中手动绑定事件,你的ViewModel可以是非常纯粹的逻辑。
(3)、当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。无须担心如何自己清理他们。

vue.js 第九课的更多相关文章

  1. vue.js 第二课

    实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通 ...

  2. vue.js 第一课:实例化vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 深入浅出 Vue.js 第九章 解析器---学习笔记

    本文结合 Vue 源码进行学习 学习时,根据 github 上 Vue 项目的 package.json 文件,可知版本为 2.6.10 解析器 一.解析器的作用 解析器的作用就是将模版解析成 AST ...

  4. vue.js学习(第一课)

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  5. 如何用three.js搭建处理3D园区、3D楼层、3D机房管线(机房升级版)-第九课(二)

    接着上一篇文章,<如何用webgl(three.js)搭建处理3D园区.3D楼层.3D机房管线问题(机房升级版)-第九课(一)> 继续讲解关于三维数据中心管线可视化的解决方案. 上一篇我们 ...

  6. vue.js第六课

    class与style绑定 绑定HTML class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 1.class与style绑定. 数据绑定一个常见需求就是 操作元素的clas ...

  7. vue.js 第五课

    计算属性 1.基础例子 2.计算属性 vs $watch 3.计算 setter 4.计算属性开发实务demo   1.计算属性 computed( 电脑computer) (区别普通属性) 计算属性 ...

  8. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  9. vue.js 第三课

    1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle   1.vue.js都是通过 var vm=new V ...

随机推荐

  1. swagger2 常用注解的使用

    一.@Api 效果: @Api注解放在类上面,这里的value是没用的,tags表示该controller的介绍. 二 .@ApiOperation 效果: @ApiOperation注解用于放在方法 ...

  2. css之变形(transform)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ubuntu14.04安装google chrome

    安装好Ubuntu14.04之后安装google chrome浏览器 1.按下 Ctrl + Alt + t 键盘组合键,启动终端 2.在终端中,输入以下命令 (将下载源加入到系统的源列表.命令的反馈 ...

  4. centos长ping输出日志的脚本

    为监控某服务器的网络情况,制作一个sh脚本,记录ping的长过程,并输出日志以备观察. 1.脚本如下 cat /home/summer/ping100.sh #!/bin/sh ping 172.16 ...

  5. 【想见你】剧情解析byZlc

    花两天时间刷完了想见你,精神有点恍惚. 要是刷题也能有这个尽头就好了... 下面给大家带来个人的剧(hu)情(bian)解(luan)析(zao) 穿越条件:一台老式随身听,一首last dance, ...

  6. C#常用集合

    数组的缺点:长度固定.因此引入集合的使用. 注:泛型集合更安全,性能更高. 常用集合 对应泛型 ①动态数组ArrayList    List<T> 常用方法属性:Add  Clear  C ...

  7. Postman的使用和测试

    1.输入认证的IP,获取headers 2.输入用户名及密码 3.带着headers去访问网址 4.传参

  8. git按需过滤提交文件的一个细节

    问题场景 用git管理代码时,作为git小白的我总会遇到一些无法理解的问题,在请教了一些高手后终于解开了疑惑,参考以下场景: 1.比如我们已在电脑1上完成用vs编辑项目.添加.提交到服务器的完整流程, ...

  9. Mac 配置 React Native 环境

    OSX系统,这里假定你是iOS开发人员 Homebrew 是需要的,只有安装了Homebrew才能继续安装watchman和flow 安装 Node.js 4.0 或者更新的版本. 使用 Homebr ...

  10. python序列的拆分

    1 变量个数和序列长度相等 使用赋值语句可以将序列拆分,然后赋值给多个变量,形式如下: 变量1,变量2,...,变量n = 序列或可迭代对象 若变量个数和序列的元素个数不一致,将导致ValueErro ...