<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>事件修饰符</title>

    <script src="../lib/vue.js"></script>

    <style>

        .app{

            width: 200px;

            height: 200px;

            background: red;

        }

    </style>

</head>

<body>

    <!-- <div class="app" @click.capture="outClick"> -->

        <!-- 使用.capture实现捕获触发事件的机制，即从外部事件开始执行 -->

    <div class="app" @click.self="outClick">

        <!-- 使用.self实现只有点击当前元素才会触发事件处理函数-->

        <input type="button" value="按钮1" @click.stop="innerClick">

        <!-- 使用.stop阻止事件的冒泡行为 -->

        <input type="button" value="按钮2" @click.once="innerClick">

        <!-- 使用.once实现事件的触发次数为一次 -->

        <a href="https://www.baidu.com/" @click.prevent.stop="aClick">有事找百度</a>

        <!-- 使用.prevent阻止事件的默认行为 -->

    </div>

    <script>

        var vm = new Vue({

            el:".app",

            methods:{

                outClick(){

                    alert('我是外面的事件');

                },

                innerClick(){

                    alert('我是内部的事件');

                },

                aClick(){

                    alert('我是超链接的事件');

                }

            }

        })

    </script>

</body>

</html>

最新文章

  1. [译]ZOOKEEPER RECIPES-Barriers
  2. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(九)
  3. Host Definition
  4. eclipse创建多模块maven工程小结
  5. android调用系统自带的的浏览器搜索关键字
  6. linux下mysql忘记root密码的解决方案
  7. 自己实现的Boost库中的lexical_cast随意类型转换
  8. PHP 5:PHP语法导向
  9. Hexo搭建静态个人博客
  10. Trim(&#39;,&#39;)的作用去除最有一个&#39;,&#39;
  11. 【WebGL】《WebGL编程指南》读书笔记——第5章
  12. Centos7 下Jenkins 安装
  13. 熟悉Linux常用命令
  14. Generative Adversarial Nets[Introduction]
  15. Python下安装MySQLdb模块
  16. 20135337——linux第四次实践：字符集总结与分析
  17. 在MySQL Workbench查看表，表结构，索引，函数，存储过程，触发器，重连
  18. wp-postviews使用方法
  19. ASP.NET jQuery 事件里调用后台方法
  20. JavaScript中的数据属性和访问器属性

热门文章

  1. 10-C#笔记-封装
  2. history.back(-1)和history.go(-1)的区别 (有错误)
  3. 前端/H5/JS：通过URL下载文件并转存到其他服务器（微信），Blob文件转File文件
  4. Codeforces Round 564 题解
  5. c博客作业-数组
  6. wordpress nginx详细环境配置安装命令和相关问题解决
  7. Ubuntu16.04安装Filebeat
  8. 识别led灯和驱动器的关联关系
  9. linux 系统时间 EST CST
  10. 记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法