v-on事件修饰符及按键修饰符

其他 2018-10-08 20:09:51 阅读次数: 0

v-on 事件修饰符

常用的事件修饰符有：

.stop  阻止事件冒泡

.self  当事件在该元素本身触发时才触发事件

.capture 添加事件侦听器是，使用事件捕获模式

.prevent  阻止默认事件

.once 事件只触发一次

什么是事件冒泡

<!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>v-on</title>
  <script src="vue.min.js"></script>
  <style>
    .outer{
      width: 160px;
      height: 160px;
      background: #D45F10;
      border: 1px solid #D45F10;
    }
    .inner{
      width: 100px;
      height: 100px;
      background: #47EE26;
      margin: 30px;
    }
  </style>
</head>
<body>
  <div id="app">

    <h2>事件冒泡</h2>
    <div class="outer" @click="outerClick">
      <div class="inner" @click="innerClick">
        <button @click="btnClick">事件冒泡</button>
      </div>
    </div>
    <p>当点击按钮时，会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件</p>
    <p>当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件</p>
    <p>当点击outer div时，只触发outer点击事件</p>
    <p>这就是事件冒泡</p>

  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {

      },
      // 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
      methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        }
      }
    });
  </script>
</body>
</html>

.stop  阻止事件冒泡

<!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>v-on</title>
  <script src="vue.min.js"></script>
  <style>
    .outer{
      width: 160px;
      height: 160px;
      background: #D45F10;
      border: 1px solid #D45F10;
    }
    .inner{
      width: 100px;
      height: 100px;
      background: #47EE26;
      margin: 30px;
    }
  </style>
</head>
<body>
  <div id="app">

    <h2>.stop阻止事件冒泡</h2>
    <div class="outer" @click="outerClick">
      <div class="inner" @click="innerClick">
        <button @click.stop="btnClick">阻止事件冒泡</button>
      </div>
    </div>
    <p>.stop可以实现当我点击按钮的时候，只触发按钮点击事件，阻止了事件冒泡</p>

  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {

      },
      // 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
      methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        }
      }
    });
  </script>
</body>
</html>

.self  只有当事件在该元素本身触发时才触发事件

<!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>v-on</title>
  <script src="vue.min.js"></script>
  <style>
    .outer{
      width: 160px;
      height: 160px;
      background: #D45F10;
      border: 1px solid #D45F10;
    }
    .inner{
      width: 100px;
      height: 100px;
      background: #47EE26;
      margin: 30px;
    }
  </style>
</head>
<body>
  <div id="app">

    <h2>.self当事件在该元素本身触发时触发回调（比如 不是子元素）</h2>
    <div class="outer" @click="outerClick">
      <div class="inner" @click.self="innerClick">
        <button @click="btnClick">self效果</button>
      </div>
    </div>
    <p>.self只能阻止自己身上冒泡行为，并不会真正的阻止冒泡行为</p>
    <p>只给inner div 加.self，当点击按钮时，会从里到外依次触发按钮点击事件、outer点击事件</p>
    <p>而不会触发inner点击事件，跳过了inner div冒泡</p>
    <p>当点击inner div时，依然会从里到外依次触发inner点击事件、outer点击事件</p>
    
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {

      },
      // 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
      methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        }
      }
    });
  </script>
</body>
</html>

.capture 添加事件侦听器是，使用事件捕获模式

<!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>v-on</title>
  <script src="vue.min.js"></script>
  <style>
    .outer{
      width: 160px;
      height: 160px;
      background: #D45F10;
      border: 1px solid #D45F10;
    }
    .inner{
      width: 100px;
      height: 100px;
      background: #47EE26;
      margin: 30px;
    }
  </style>
</head>
<body>
  <div id="app">

    <h2>.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)</h2>
    <div class="outer" @click.capture="outerClick">
      <div class="inner" @click.capture="innerClick">
        <button @click="btnClick">事件捕获</button>
      </div>
    </div>
    <p>当给inner div、outer div都添加.capture修饰符的时候</p>
    <p>当点击按钮时，会从外到里依次触发outer点击事件、inner点击事件、按钮点击事件</p>
    <p>当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件</p>
    <p>当点击outer div时，只触发outer点击事件</p>
    <p>这就是事件捕获</p>


    <h2>.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)</h2>
    <div class="outer" @click.capture="outerClick">
      <div class="inner" @click="innerClick">
        <button @click="btnClick">事件捕获</button>
      </div>
    </div>
    <p>当只给outer div添加.capture修饰符的时候</p>
    <p>当点击按钮时，会依次触发outer点击事件、按钮点击事件、inner点击事件</p>
    <p>即为outer和outer内部分两部分，是事件捕获，但outer内部还有嵌套的部分仍是事件冒泡</p>
    <p>当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件</p>
    <p>当点击outer div时，只触发outer点击事件</p>


    <h2>.capture添加事件侦听器时使用事件捕获模式(即为实现捕获触发事件的机制)</h2>
    <div class="outer" @click="outerClick">
      <div class="inner" @click.capture="innerClick">
        <button @click="btnClick">事件捕获</button>
      </div>
    </div>
    <p>当只给inner div添加.capture修饰符的时候</p>
    <p>当点击按钮时，会依次触发((inner点击事件、按钮点击事件)(事件捕获)、outer点击事件)(事件冒泡)</p>
    <p>当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件，事件冒泡</p>
    <p>当点击outer div时，只触发outer点击事件</p>
    
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {

      },
      // 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
      methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        }
      }
    });
  </script>
</body>
</html>

.prevent  阻止默认事件

<body>
  <div id="app">

    <h2>.prevent阻止默认事件</h2>
    <a href="http://www.baidu.com" @click.prevent="preventClick">百度一下 你就知道</a>
    // 点击只会触发preventClick事件，不会跳转页面，阻止了a标签的默认跳转

  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {

      },
      // 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
      methods: {
        preventClick () {
          console.log("阻止了a标签的默认点击跳转事件")
        }
      }
    });
  </script>
</body>

.once 事件只触发一次

<body>
  <div id="app">

    <h2>.once事件只触发一次</h2>
    <input type="button" value="只触发一次" @click.once="onceClick">
    
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {

      },
      // 在methods中使用data里面的数据的时候，要加this指向该Vue实例对象
      methods: {
        onceClick () {
          console.log("事件只触发一次,点击再多次按钮，也只输出一次")
        }
      }
    });
  </script>
</body>

v-on 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

按键别名：
    .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

注意：在Windows系统键盘上meta对应windows徽标键(⊞)。

<body>
    <div id="app">
        // Enter键触发submit事件  下面三种写法都对
        <input type="text" v-on:keyup.enter="submit" />
        <input type="text" @keyup.enter="submit" />
        <input type="text" @keyup.13="submit" />
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                submit() {
                    console.log("enter键触发事件");
                }
            }
        });
    </script>
</body>

修饰符可以串联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <style>
        .outer{
          width: 160px;
          height: 160px;
          background: #D45F10;
          border: 1px solid #D45F10;
        }
        .inner{
          width: 100px;
          height: 100px;
          background: #47EE26;
          margin: 30px;
        }
      </style>
</head>
<body>
    <div id="app">
        <!--v-on: Vue中的事件绑定机制-->
        <input type="button" value="按钮1" v-on:click="show" />
        <!-- v-on: 指令可以简写为  @要绑定的事件-->
        <input type="button" value="按钮2" @click="show" />

        <h2>修饰符串联</h2>
        <div class="outer" @click="outerClick">
            <div class="inner" @click="innerClick">
                <!-- 既阻止了默认事件，又阻止了事件冒泡 -->
                <a href="http://www.baidu.com" @click.stop.prevent="btnClick">修饰符串联</a>
            </div>
        </div>

        <!-- Alt + C 触发事件 -->
        <input type="text" @keyup.alt.67="altClick">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '天天向上'
            },
            // methods属性中定义当前Vue实例中所有可用的方法
            methods: {
                show: function () {
                    alert('hello!');
                },
                outerClick() {
                    console.log("触发了outer点击事件")
                },
                innerClick() {
                    console.log("触发了inner点击事件")
                },
                btnClick() {
                    console.log("触发了按钮点击事件")
                },
                altClick() {
                    console.log("Alt + C 触发事件")
                }
            }
        });
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/sleepwalker_1992/article/details/82903246
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022