v-on的修饰符

原创已于 2022-11-10 18:15:43 修改 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-11-10 18:15:42 首次发布

vue学习专栏收录该内容

41 篇文章

订阅专栏

1.stop修饰符的使用——阻止冒泡事件

<div id="app">
 <div @click="divClick">
   <button @click="btnClick">按钮</button>
 </div>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        },
        methods:{
      divClick(){
        console.log("divClick");
      },
          btnClick(){
            console.log("btnClick");
          }
        }

  })
</script>

点击按钮，事件冒泡，两个都发生

希望达到只有点击“点击这里”时，divClick才执行，而不是点击按钮时执行。达到此效果需要阻止按钮的事件冒泡。

<div id="app">
 <div @click="divClick">
   点击这里<button @click="btnClick">按钮</button>
 </div>
</div>

添加修饰符stop 后再次点击按钮

<div id="app">
 <div @click="divClick">
   点击这里<button @click.stop="btnClick">按钮</button>
 </div>
</di

2.prevent修饰符的使用——阻止默认事件

不希望代码点击提交按钮后自动提交，希望自己手动提交

<form action="baidu">
  <input type="submit" value="提交">
</form>
</div>

此时有打印有提交

<form action="baidu">
  <input type="submit" value="提交" @click="submitClick">
</form>
    submitClick(){
      console.log(submitClick);
    }

添加prevent修饰，此时只有打印没有提交

<form action="baidu">
  <input type="submit" value="提交" @click.prevent="submitClick">
</form>
          submitClick(){
            console.log("submitClick");
          }

3.keyup——监听键盘某个键的点击

监听所有按钮，准确说是手抬起的次数

          
  <input type="text" @keyup="keyUp">
keyUp()
          {
            console.log("keyUp");
          }

只监听回车按钮

  <input type="text" @keyup.enter="keyUp">

4.once——只触发一次回调

希望只有第一次点按钮有反应，之后无反应

  <button @click.once="btn2Click">按钮2</button>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--stop修饰符的使用-->
<div id="app">
 <div @click="divClick">
   点击这里<button @click.stop="btnClick">按钮</button>
 </div>
<!--prevent修饰符的使用-->
<form action="baidu">
  <input type="submit" value="提交" @click.prevent="submitClick">
</form>

<!--  监听某个键盘的点击-->
<!--  一般用keyup较多-->
  <input type="text" @keyup.enter="keyUp">
<!--  once的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>


<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        },
        methods:{
      divClick(){
        console.log("divClick");
      },
          btnClick() {
            console.log("btnClick");
          },
          submitClick(){
            console.log("submitClick");
          },
          keyUp()
          {
            console.log("keyUp");
          },
          btn2Click(){
            console.log(" btn2Click");
          }
        }

    }
  )
</script>

</body>
</html>