Vue(6)v-on指令的使用[通俗易懂]

Vue(6)v-on指令的使用[通俗易懂]v-on监听事件可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。事件代码可以直接放到v-on后面,也可以写成一个函数。示例代码如下:<divid

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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.jsv-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop:event.stopPropagation,阻止事件冒泡。
  • .prevent:event.preventDefault,阻止默认行为
  • .capture:事件捕获。
  • .self:代表当前这个被点击的元素自身。
  • .once:这个事件只执行一次。
  • .passive:在页面滚动的时候告诉浏览器不会阻止默认的行为,从而让滚动更加顺畅。

案例1:阻止单击事件继续传播

<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>

案例2:提交事件不再重载页面

<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阻止了他的默认行为

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164864.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java 单点登录 cas 修改配置文件 为查询数据库登录

    java 单点登录 cas 修改配置文件 为查询数据库登录

  • 手机看Typora笔记[通俗易懂]

    接触Typora之后感觉还挺好用的,不用上网,不用花钱(白嫖的玩意就是香)。可以写普通的文本,可以添加五个等级的标题,可以插入图片,,还可以插入各种各样的代码块(java,c,html,css等等),简洁而强大。但是当初我以为只能在电脑上看的时候就觉得有点难受,玛德是我S13了,我还去网上搜了半天,看看有没有教程或者手机版的软件,有的还要付费,今天我恍然大悟,尼玛人家开发个软件怎么可能没想到这些东西呢,我真是S13卧槽。看图啥都懂了:别被坑钱和C币吧…

  • win10下禁止自动更新,Window Update禁用无效后续方法

    win10下禁止自动更新,Window Update禁用无效后续方法win10禁用自动更新,现在需要禁用两个服务,分别是WindowsUpdate和WindowsUpdateMedicService。为啥呢。WindowsUpdate是启用检测、下载和安装Windows和其他程序的更新。单个禁用它没有效果因为win10鸡贼地加了WindowsUpdateMedicService服务,是启用对Windows更新组件的修复和保护。禁…

  • js 几种保留小数点后两位

    这里写自定义目录标题js有几种方法可以保留小数点的后两位第一种方法说明第二种方法第三种方法js有几种方法可以保留小数点的后两位以下我们将为大家介绍JavaScript保留两位小数的实现方法:第一种方法通过substring截取。functiongetnum(){varnum=22.123456;varresult=num.substring(0,s.index…

  • pytest fixtures_pytest allure

    pytest fixtures_pytest allurefixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活,不局限于setup和teardown这几个命名conf

  • matlab中如何调用lm算法,lm算法的matlab实现「建议收藏」

    matlab中如何调用lm算法,lm算法的matlab实现「建议收藏」inlm’);%下面使用遗传算法对网络进行优化P=XX;T=YY;R=size(P,1);S2=size(T,1);S1=25;%隐含层节点数S=R*S1+S1*S2+S1+S2;%遗传算法编码……实现nfc95p算法的matlab程序_数学_自然科学_专业资料。cleara…{on}|off]例子1用matlab实现对fmsinsin2…lm1;…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号