×

vue开发Tips:用具体实例去理解v-on指令的基本应用

作者:jiang2021.10.27来源:Web前端之家浏览:250评论:0
关键词:vuejs
微信公众号

微信公众号

分享一个vue开发Tips:理解v-on指令。

监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript代码。事件代码可以直接放到v-on后面,也可以写成一个函数。

示例代码如下:

<div id="app">
  <p>{{counter}}</p>
  <button @click="counter += 1">+1</button>
  <button @click="subtract(10)">-10</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      subtract(value){
        this.counter-=value
      }
    }
  })
</script>

传入event参数

如果在事件处理函数中,想要获取原生的DOM事件,那么在html代码中,调用的时候,可以传递一个$event参数。

示例代码如下:

<button v-on:click="subtract(10,$event)">减10</button>
...
<script>
...
methods: {
    subtract: function(value,event){
        this.count -= value;
        console.log(event);
    }
}
...
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop:event.stopPropagation,阻止事件冒泡。

  • .prevent:event.preventDefault,阻止默认行为

  • .capture:事件捕获。

  • .self:代表当前这个被点击的元素自身。

  • .once:这个事件只执行一次。

  • .passive:在页面滚动的时候告诉浏览器不会阻止默认的行为,从而让滚动更加顺畅。

DEMO1:阻止单击事件继续传播:

<div id="app">
  <div @click="divClick">
    1111
    <button @click.stop="btnClick">按钮</button>
  </div>
</div>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      count: 0
    },
    methods: {
      divClick(){
        console.log("divClick")
      },
      btnClick(){
        console.log("btnClick")
      }
    }
  });
</script>

DEMO2:提交事件不再重载页面:

<div id="app">
  <form action="">
    <label>
      <input type="text">
    </label>
    <label>
      <input type="submit" value="提交">
    </label>
  </form>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
    }
  })
</script>

以上是最标准的提交数据的代码,提交完后会自动跳转到百度,但是现在有个需求,我们希望输入完数据后,不会自动跳转到百度,而是通过自己的方法,先处理数据,处理完后,自己指定页面跳转,

代码如下:

<div id="app">
  <form action="https://www.baidu.com">
    <label>
      <input type="text">
    </label>
    <label>
      <input type="submit" value="提交" @click.prevent="testClick">
    </label>
  </form>
</div>
<script>
  const app = new Vue({
    el: "#app",
    methods: {
      testClick(){
      }
    }
  })
</script>

这里我们给submit绑定了一个点击事件,并使用.prevent阻止了他的默认行为。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20211027a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1