• 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 abdeleteescspaceupdownleft igt + 单字母 可用的按键名。
    4、为什么在HTML中监听事件。
    (1)、vue.js事件处理方法和表打死都严格绑定在当前使徒的ViewModel上。
    (2)、无需再javascript中手动绑定事件,你的ViewModel可以是非常纯粹的逻辑。
    (3)、当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。无须担心如何自己清理他们。
  • 相关阅读:
    angularjs 默认选中ng-repeat的一个
    AngularJs中directive的延迟加载
    AngularJS的angucomplete-alt
    Bootstrap Multiselect中文
    input[file]标签的accept=”image/*”属性响应很慢的解决办法
    全局安装cnpm
    实现鼠标悬浮内容自动撑开的过渡动画
    table表格 css样式
    IntelliJ idea 的破解
    浏览器使用谷歌搜索
  • 原文地址:https://www.cnblogs.com/gaidalou/p/6382408.html
Copyright © 2020-2023  润新知