vue-修饰符（学习笔记）

最新推荐文章于 2024-09-29 17:29:37 发布

我想要技术

最新推荐文章于 2024-09-29 17:29:37 发布

阅读量361

点赞数 9

分类专栏：随笔文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_63611828/article/details/135879922

版权

随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

事件修饰符

在事件处理程序中，调用event.preventDefault()或event.stopPropagation()是非常常见的需求，阻止事件冒泡或捕获或者事件默认行为。

尽管在方法中可以实现这点，但是更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符。事件修饰符是由点开头的指令后缀来表示的

.stop : 阻止单击事件继续传播
.prevnet : 阻止事件默认行为
.capture : 添加事件监听器时使用事件捕获模式
.self : 只当在event.target 是当前元素自身时触发处理函数
.once : 点击事件将只会触发一次
.passive : 滚动事件的默认行为（即滚动行文）将会立即触发

.stop

<body>
    <div id="app">
        <div class="father" @click="say('父')">
            父
            <div class="child" @click.stop="say('子')">
                子
            </div>
        </div>
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            methods:{
                say:function (e) {
                    alert(`点击了${e}`)
                }
            }
        })
    </script>
</body>

不加阻止事件的话，点击子元素时，会先执行子元素的方法，然后再执行父元素的方法，从内向外以此执行。

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为v-on在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

.enter

补充：keyup 事件在按键被松开时触发。

<body>
    <div id="app">
      <input
        type="text"
        @keyup.enter="alert('你按了enter,确定输入完毕？')"
      />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
      });
    </script>
  </body>

系统修饰符

.ctrl
.alt
.shift
.meta

<body>
    <div id="app">
      <!-- 同时鼠标左击和按 ctrl 弹出提示 -->
      <div @click.ctrl="alert('你同时按了鼠标点击和ctrl')">Do something</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
      });
    </script>
  </body>

.exact 精确按键修饰符，允许你控制由精确的系统修饰符组合触发的事件。

 <body>
    <div id="app">
      <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
      <button
        @click.ctrl="alert('你不单单只按了鼠标左键和 Ctrl键，同时按其他键我也可以触发')"
      >
        A
      </button>

      <!-- 有且只有 ctrl 键 + 鼠标左键 被按下的时候才触发 -->
      <button @click.ctrl.exact="alert('你只按ctrl键+鼠标左键，才能触发我')">
        A
      </button>

      <!-- 没有任何系统修饰符被按下的时候才触发 -->
      <button @click.exact="alert('没有按任何系统修饰符')">A</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
      });
    </script>
  </body>

鼠标按钮修饰符

.left
.middle
.right

 <body>
    <div id="app">
      <button @click.left="alert('你按了鼠标左击键')">按钮</button>
      <button @click.middle="alert('你按了鼠标滚轮')">按钮</button>
      <button @click.right="alert('你按了鼠标右击键')">按钮</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
      });
    </script>
  </body>