zoukankan      html  css  js  c++  java
  • Vue修饰符

    事件修饰符

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

    Vue.js通过由点(.)表示的指令后缀来调用修饰符。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
     1 <!-- 阻止单击事件冒泡 -->
     2 <a v-on:click.stop="doThis"></a>
     3 <!-- 提交事件不再重载页面 -->
     4 <form v-on:submit.prevent="onSubmit"></form>
     5 <!-- 修饰符可以串联  -->
     6 <a v-on:click.stop.prevent="doThat"></a>
     7 <!-- 只有修饰符 -->
     8 <form v-on:submit.prevent></form>
     9 <!-- 添加事件侦听器时使用事件捕获模式 -->
    10 <div v-on:click.capture="doThis">...</div>
    11 <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    12 <div v-on:click.self="doThat">...</div>
    13 
    14 <!-- click 事件至少触发一次,2.1.4版本新增 -->
    15 <a v-on:click.once="doThis"></a>

    按键修饰符

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

    <!-- 只有在 keyCode 是 13 时调用 vm.submit() --><inputv-on:keyup.13="submit">

    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

    <!-- 同上 --><inputv-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">

    全部的按键别名:

    • .enter
    • .tab
    • .delete (捕获 "删除" 和 "退格" 键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
    • .ctrl
    • .alt
    • .shift
    • .meta
    <p><!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>
    <!-- 阻止单击事件冒泡 --><av-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><formv-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><av-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><formv-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><divv-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --><divv-on:click.self="doThat">...</div><!-- click 事件至少触发一次,2.1.4版本新增 --><av-on:click.once="doThis"></a>
  • 相关阅读:
    Java连接数据库 #02# JDBC经典套路
    Eloquent JavaScript #03# functions
    Java笔记 #04# 类的初始化顺序补充
    Java笔记 #03# HtmlUnit爬虫
    Google's Machine Learning Crash Course #04# First Steps with TensorFlow
    IntelliJ IDEA. Debug模式
    python实用笔记,加快编程速度,lamdba,三元运算,open.
    开源项目管理平台*redmine*的架设
    MYSQL双主故障解决实例。
    LVS-DR工作原理
  • 原文地址:https://www.cnblogs.com/zhn0823/p/6507383.html
Copyright © 2011-2022 走看看