Vue 中v-on

一、v-on的基本用法

使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click。方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>。

以简单的计数器为例

<body>
  <div id="app">
      <h2>{{count}}</h2>
      <!-- <button v-on:click="count++">加</button>
      <button v-on:click="count--">减</button> -->
      <button @click="increment">加</button>
      <button @click="decrement">减</button>
  </div>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        count:0
      },
      methods: {
        increment(){
          this.count++
        },
        decrement(){
          this.count--
        }
      }
    })

  </script>
</body>

二、v-on的参数传递

在methods中定义的方法,我们可以进行调用,可以带上(),也可以不带()

如下的btnClick的调用中,加了()想要调用,里面必须要有值,如果不加小括号,就只会调用事件对象。

btnClick3想要传入event,需要在调用时写$event,才能调用事件对象。
  <div id="app">
    <!-- 事件没传参 -->
    <button @click="btnClick">按钮1</button>
    <button @click="btnClick()">按钮2</button>
    <!-- 事件调用方法传参,写函数时候省略小括号,但是函数本身需要传递一个参数 -->
    <button @click="btnClick2">按钮3</button>
    <button @click="btnClick2()">按钮4</button>
    <button @click="btnClick2">按钮5</button>
    <!-- 事件调用时候需要传入event还需要传入其他参数 -->
    <button @click="btnClick3($event,123)">按钮6</button>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      methods:{
        btnClick(){
          console.lo***击XXX");
        },
        btnClick2(value){
          console.log(value+"----------");
        },
        btnClick3(event,value){
          console.log(event+"----------"+value);
        }
      }
    })
  </script>


  1. 事件没传参,可以省略()
  2. 事件调用方法传参了,写函数时候省略了小括号,但是函数本身是需要传递一个参数的,这个参数就是原生事件event参数传递进去
  3. 如果同时需要传入某个参数,同时需要event是,可以通过$event传入事件。

三、v-on的修饰词

  1. stop的使用,btn的click事件不会传播,不会冒泡到上层,调用event.stopPropagation()。
  2. prevent 调用event.preeventDefault阻止默认行为。
  3. enter监听键盘事件;
  4. once 事件只触发一次(常用);
  5. capture 使用事件的捕获模式;
  6. self 只有event.target是当前操作的元素时才触发事件;
  7. passive 事件的默认行为立即执行,无需等待事件回调执行完毕;

      <style>
    	  .div {
    	    height:80px;
    	    background:#f00;
    	  }
      </style>
    </head>
    <body>
      <div id="app">
        <!--1. .stop的使用,btn的click事件不会传播,不会冒泡到上层,调用event.stopPropagation() -->
        <div @click="divClick">
            <button @click.stop="btnClick">按钮1</button>
        </div>
        <!-- 2. .prevent 调用event.preeventDefault阻止默认行为  -->
        <form action="www.baidu.com">
          <button type="submit" @click.prevent="submitClick">提交</button>
        </form>
        <!--3. 监听键盘的事件 -->
        <form @submit.prevent=''>
    	   账号<input type="text" name="user"/>
    	   密码<input type="text" name="password" @keyup.enter="submit"/>
    	    <input type="submit"  value="登录"/>
       </form>
      <!--4. 事件只触发一次(常用) -->
    	<button @click.once="showInfo">点我提示信息</button>	  
      <!--5. capture使用事件的捕获模式 -->
    	<div class="box1" @click.capture="show">
    		div1外面
    	<div class="box2" @click="show">
    		div2里面
    	</div>
    	</div>
     <!-- 6.只有event.target是当前操作的元素时才触发事件 -->
    	<div class="div" @click.self="showself">
    	   <button @click="showself">点我</button>
    	</div>
    <!-- 7.passive事件的默认行为立即执行,无需等待事件回调执行完毕 -->	  
      </div>
      <script src="vue.js"></script>
      <script>
        const app = new Vue({
          el:"#app",
          methods:{
            btnClick(){
              console.lo***击button");
            },
            divClick(){
              console.lo***击div");
            },
            submitClcik(){
              console.log("提交被阻止了")
            },
            submit(){
              console.log("keyup点击")
            },
    	showInfo(){
    	  alert('web学习真有趣')
    	},
    	show(msg){
    	  console.log(msg)
    	},
    	showself(e){
    	  console.log(e.target);
    	},  
          }
        })
      </script>
    </body>
    


#前端#
全部评论
明白了许多
点赞 回复 分享
发布于 2022-10-19 13:28 陕西

相关推荐

1 1 评论
分享
牛客网
牛客企业服务