这次讲红色框框。
方法与事件处理器;
方法处理器;
内联语句处理器;
事件修饰符;
按键修饰符;
为什么在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. 概率dp 148 D

    概率dp 设 f(i,j)f(i,j) 表示有 ii 只白鼠,jj 只黑鼠时A先手胜的概率 初始状态 全白时,显然先手必胜 有一只黑鼠时,先手若抽到黑鼠则后手必胜,所以先手首回合必须抽到白鼠 f(i, ...

  2. svn还原与本地版本回退

    今天遇到了一个情况,由于没及时更新,对整个项目进行了Ctrl+shift+O,提交代码时冲突:然后就先还原项目,导致之前没有冲突的代码也回退了.然后就在eclipse中获取本地的版本记录,并回退 具体 ...

  3. C# 之 代码实现延时

    Task.Delay();异步实现 using System;using System.Threading.Tasks; namespace csharpYS{ class Program { sta ...

  4. CentOS6.5_x64卸载系统原有MySQL

    1.查看系统是否存在MySQL的版本 rpm -qa | grep mysql 2.删除老版本的开头文件和库(rpm -e --nodeps XXX) rpm -e --nodeps mysql-5. ...

  5. vue 实现简单的富文本编辑

    安装:npm install vue-quill-editor --save 安装Vue-Quill-Editor需要依赖: npm install quill --save 在入口文件main.js ...

  6. 树莓派raspbian安装matchbox-keyboard虚拟键盘

    环境:raspbian-stretch(2018-06-27) 树莓派:3代B型 官网安装地址:http://ozzmaker.com/virtual-keyboard-for-the-raspber ...

  7. Java面向对象编程 -4.2

    声明static定义方法 这个时候对于程序而言方法就有了两种:static方法 非static方法. 这两个方法之间在调用上就有了限制: static方法只允许调用static属性或static方法 ...

  8. cc攻击怎么防御,如何防止cc攻击?

    当我们访问一个网站时,如果网站页面越简单,访问速度越快,页面越漂亮,加载速度就越慢,因为要加载更多东西,服务器压力也会比较大.cc攻击就是利用这种弱点,使用大量代理服务器,对网站进行攻击,消耗网站服务 ...

  9. P1428

    AC: #include <stdio.h> #define rep(i, a, b) for(int i = a; i <= b; i++) #define min(a, b) ( ...

  10. android studio :Timeout waiting to lock daemon addresses registry

    一.开发中 android studio 突然遇到下面的错误提示: Error:Timeout waiting to lock daemon addresses registry. It is cur ...