VUE中事件修饰符和键盘按键修饰符

1.常用事件修饰符(vue中 @ === v-on )：

1. -once 首次触发该事件有效:<button @click.once="defaultEvent">
2. -prevent 阻止默认事件:<button @click.prevent="defaultEvent">,作用类似e.preventDefault()

<a href="http://www.baidu.com" @click="showMsg('你好，世界')">点击提示</a>
showMsg(e) {
  console.log(e)
}
点击a标签
`
输出：你好，世界 
      并跳转至百度页面
`
<a href="http://www.baidu.com" @click.prevent="showMsg('你好，世界')">点击提示</a>
点击a标签,.prevent阻止了a标签中href的执行
`
输出：你好，世界
      不会进行跳转
`

3. -stop 阻止事件冒泡:<button @click.stop="defaultEvent">,作用类似e.stopPropagation()

<div @click="showMsg('你好，明天')">
   <a href="http://www.baidu.com" @click="showMsg('你好，世界')">点击提示</a>
</div>
showMsg(e) {
  console.log(e)
}
点击a标签，进行冒泡
`
输出：你好，世界
      你好，明天 
`
<div @click="showMsg('你好，明天')">
   <a href="http://www.baidu.com" @click.stop="showMsg('你好，世界')">点击提示</a>
</div>
点击a标签,.stop阻止了div中showMsg的执行
`
输出：你好，世界
`

4. - capture 使用事件的捕获模式

<div @click="showMsg('你好，明天')">
   <a @click="showMsg('你好，世界')">点击提示</a>
</div>
showMsg(e) {
  console.log(e)
}
点击a标签
`
输出：你好，世界
      你好，明天 
`
<div @click.capture="showMsg('你好，明天')">
   <a @click="showMsg('你好，世界')">点击提示</a>
</div>
点击a标签,.capture使从a标签开始捕获从外至内执行showMsg
`
输出：你好，明天 
      你好，世界
`

js事件冒泡与捕获：juejin.cn/post/696512…

5. - self 只有event.target是当前操作的元素时才触发事件

<div @click="showMsg('你好，明天')">
   <a @click="showMsg('你好，世界')">点击提示</a>
</div>
showMsg(e) {
  console.log(e)
}
点击a标签
`
输出：你好，世界
      你好，明天 
`
<div @click.self="showMsg('你好，明天')">
   <a @click="showMsg('你好，世界')">点击提示</a>
</div>
点击a标签,使用.self使event.target操作的元素是a,触发的事件是a上的showMsg方法，阻止了事件的冒泡
输出：你好，世界
`

6. - passive 事件的默认行为立即执行，无需等待事件回调执行完毕

passive具体讲解：blog.csdn.net/weixin_4362…

7. 事件修饰符可一起混合使用：

<div class="box1" @click="showMsg">
     <a href="http://www.baidu.com" @click.stop.prevent="showMsg">点击提示</a>
</div>

showMsg() {
  alert('你好，明天')
}
结果：
因为阻止了默认行为和冒泡，只调用a标签上的click事件，所以只有一个弹出框，不会跳转。
结论：
事件修饰符可以连用，顺序根据需求调整，效果一样。

2.常用键盘按键修饰符

1. - enter : 按下enter回车键，执行绑定事件（注意原生js中有keydown和keyup，代表按下和抬起按键对应的事件，可根据实际情况搭配使用）

<input type="text" @keydown.enter="tipLenght">
tipLenght(){
    alert(document.querySelector("input").value.length)
}

2.其它常用按键修饰符

链接：blog.csdn.net/weixin_4567…

具体用法：www.php.cn/website-des…

VUE中v-model相关的修饰符：

<input v-model.lazy="connect" type="text" >{{connect}}
<input v-model.lazy.number="connect" type="text" >{{connect}}
<input v-model.lazy.trim="connect" type="text" >{{connect}}

• .lazy: 懒，当input失去焦点时，connect做出对应变化
• .number: 将输入的字符串转为number
• .trim: 去掉输入字符串的空格