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

Vue(6)v-on指令的使用的更多相关文章

  1. VUE:内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

  2. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

  3. vue自定義指令

    自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...

  4. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  5. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  6. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  7. Vue 框架-07-循环指令 v-for,和模板的使用

    Vue 框架-07-循环指令 v-for,和模板的使用 本章主要是写一些小实例,记录代码,想要更详细的话,请查看 官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D% ...

  8. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  9. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  10. vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"

    vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTabl ...

随机推荐

  1. 一文读懂 SuperEdge 云边隧道

    作者 李腾飞,腾讯容器技术研发工程师,腾讯云TKE后台研发,SuperEdge核心开发成员. 杜杨浩,腾讯云高级工程师,热衷于开源.容器和Kubernetes.目前主要从事镜像仓库,Kubernete ...

  2. c#操作斑马打印机打印中文

    需要引用fnthex32.dll插件,这个网上就能下到,注意分为两个版本,一个版本是8个参数,一个版本是9个参数,我这里用的是9个参数的. 首先用zebradesigner设计一个打印模板 差不多就长 ...

  3. 我写了一个简单的JSON序列化和反序列化的工具

    背景 互联网上有许多可用的Json序列化和反序列化的工具,例如fastjson,jackson,Gson等等,那么,我为什么还要自己写一个? 项目不方便依赖其他第三方库.比如有时候我们编写SDK,考虑 ...

  4. 为什么说Zoho CRM是最好的销售预测系统?

    在文章的开头,我们来讲讲什么是销售预测--销售预测是指利用销售管道中的商机.已完成的配额.有望完成目标的销售团队或个人等关键信息对产品的销售数量与销售金额进行预测的手段.企业在制定销售计划时的重要任务 ...

  5. [bug] org.apache.spark.sql.AnalysisException: Table or view not found spark

    参考 https://blog.csdn.net/weixin_44634893/article/details/89629399

  6. [Java] Structs

    背景 基于MVC的WEB框架 在表示层过滤访问请求并处理 步骤 在eclipse中创建Web动态项目 导入相关jar包到WEB-INF/lib 在WEB-INF目录下新建web.xml,配置Filte ...

  7. 如何解决在WordPress安装Redis插件时需要输入FTP问题?

    用LAMP或者LNMP搭建Worepress的时候,安装主题或者插件时候,往往提示需要输入FTP服务端信息的问题,其实这是一个坑,可以完全避免的 我们只需在wp-config.php文件最后添加以下代 ...

  8. named piped tcp proxy 下载

    named piped tcp proxy 在某DN上面下载很麻烦,还要登录什么的,分享出来!希望大家支持 链接:https://pan.baidu.com/s/1fdJD6O0qb8_BkkrnMy ...

  9. 8.12-14 df 、mkswap、swapon、swapoff、sync

    8.12 df:报告文件系统磁盘空间的使用情况   -a    显示所有文件系统 -h    以容易理解的格式显示磁盘的使用情况端 -i    显示文件系统的inode信息迷 -t    显示指定类型 ...

  10. SpringMVC学习笔记-REST风格请求实现

    RESTful概念及功能 RESTful的概念:RESTful是 一种资源定位及资源操作的风格,其本身既不是标准也不是协议,而是一种设计风格,可以使得软件整体层次更加分明.代码更加简洁,并且有利于实现 ...