vue.js 第九课

这次讲红色框框。
方法与事件处理器;
方法处理器;
内联语句处理器;
事件修饰符;
按键修饰符;
为什么在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被销毁时,所有的事件处理器都会自动被删除。无须担心如何自己清理他们。
posted @ 2017-02-09 15:39  盖大楼  阅读(198)  评论(0编辑  收藏  举报