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. megacli修复raid1硬盘

    megacli修复raid1硬盘 By HKL, Tuesday 27 August 2019, 评论 [ Hardware Operating ] 使用megaraid修复raid1掉线硬盘 使用说 ...

  2. IEEE 网址

    https://ieeexplore.ieee.org/document/506397

  3. 5.8-12 watch、which、whereis、locate、updatedb

    5.8 watch:监视命令执行情况 watch命令可以以全屏的方式动态显示命令或程序的执行情况.   -n    命令执行的间隔时间,默认为2s -d    高亮显示命令结果的变动之处 -t     ...

  4. 记一次zabbix-server故障恢复导致的事故 zabbix-server.log -- One child process died

    前言 zabbix-server昨天出了个问题,不停的重启.昨天摆弄到晚上也不搞清楚原因,按照网上说的各种操作,各种CacheSize.TimeOut.StartPollers都改了,还有什么Incl ...

  5. 在js中将map对象转换成json 和 js对cookie的操作

    在js中将map对象转换成json //msp转objectlet obj= Object.create(null); for (let[k,v] of map) { obj[k] = v; }//o ...

  6. (最新)VS2015安装以及卸载过程——踩坑实录

    前言 Visual Studio (简称VS)是微软公司旗下最重要的软件集成开发工具产品.是目前最流行的 Windows 平台应用程序开发环境,也是无数人学习编程的入门软件之一.Visual Stud ...

  7. Azure DevOps(二)利用Azure DevOps Pipeline 构建基础设施资源

    一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...

  8. C++ OP相关注意事项

    C++ OP相关注意事项 Paddle中Op的构建逻辑 1.Paddle中Op的构建逻辑 Paddle中所有的Op都继承自OperatorBase,且所有的Op都是无状态的,每个Op包含的成员变量只有 ...

  9. TensorFlow反向传播算法实现

    TensorFlow反向传播算法实现 反向传播(BPN)算法是神经网络中研究最多.使用最多的算法之一,用于将输出层中的误差传播到隐藏层的神经元,然后用于更新权重. 学习 BPN 算法可以分成以下两个过 ...

  10. 摄像头ISP系统原理(上)

    摄像头ISP系统原理(上) ISP(Image Signal Processor),即图像信号处理器,用于处理图像信号传感器输出的图像信号.它在相机系统中占有核心主导的地位,是构成相机的重要设备. 主 ...