vue中修饰符

事件修饰符

v-on  简写为  @

1.   .stop--阻止单击事件继续传播 ,即阻止冒泡

   <li @click="done">
   
   //加上.stop可以阻止冒泡事件执行
   <a v-on:click.stop="doThis"></a>
   
   </li>

    

2.  .prevent--提交事件不再重载页面,阻止form表单默认提交

   <form v-on:submit.prevent="onSubmit"></form>

3.   .capture--添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

   <div v-on:click.capture="doThis">...</div>

4.   .self--只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的

   <div v-on:click.self="doThat">...</div>

5.   .once--点击事件将只会触发一次

   <a v-on:click.once="doThis"></a>

6.  .passive(新增)--滚动事件的默认行为 (即滚动行为) 将会立即触发

   <div v-on:scroll.passive="onScroll">...</div>

7. 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
8. 修饰符可以串联--<a v-on:click.stop.prevent="doThat"></a>

自定义组件事件修饰符

1.   .native

• .native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待

  <el-dropdown-item divided @click.native="logout">
      <span style="display:block;">退出登录</span>
  </el-dropdown-item>

   

• 并不是所有的自定义的组件都天然能添加@click监听，如果监听不了，再补充一个.native

    2.   .sync(重点)

• 实现父子组件数据之间的双向绑定
• 实现原理

  // 正常父传子： 
  <com1 :a="num" :b="num2"></com1>
  
  // 加上sync之后父传子： 
  <com1 :a.sync="num" .b.sync="num2"></com1> 
  
  // 它等价于
  <com1 
    :a="num" @update:a="val=>num=val"
    :b="num2" @update:b="val=>num2=val"></com1> 
  
  // 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

   

sync与v-model区别是:

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

• 区别点：

  • 格式不同。 v-model="num", :num.sync="num"

  • v-model： @input + value

  • :num.sync: @update:num

  • v-model只能用一次；.sync可以有多个。

按键修饰符

• .enter 回车键触发事件
• .tab  tab建触发
• .delete (捕获“删除”和“退格”键)
• .esc  退出键触发
• .space 空格键触发
• .up   上
• .down  下
• .left  左
• .right  右
• 按键码也行,即keycode
• 使用:  v-on:keyup.按键="函数名"  @keyup.按键="函数名"

系统修饰键

• .ctrl
• .alt
• .shift
• .meta  在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)
• 示例:

  <!-- Alt + C -->
  <input v-on:keyup.alt.67="clear">
  
  <!-- Ctrl + Click -->
  <div v-on:click.ctrl="doSomething">Do something</div>

   

.exact     修饰符允许你控制由精确的系统修饰符组合触发的事件。(新增)

示例:

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按键修饰符

• .left
• .right
• .middle