Vue(6)v-on指令的使用
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:在页面滚动的时候告诉浏览器不会阻止默认的行为,从而让滚动更加顺畅。
案例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指令的使用的更多相关文章
- VUE:内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
- vue自定義指令
自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...
- Vue(四) 内置指令
现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- Vue 框架-07-循环指令 v-for,和模板的使用
Vue 框架-07-循环指令 v-for,和模板的使用 本章主要是写一些小实例,记录代码,想要更详细的话,请查看 官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D% ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- 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 ...
随机推荐
- megacli修复raid1硬盘
megacli修复raid1硬盘 By HKL, Tuesday 27 August 2019, 评论 [ Hardware Operating ] 使用megaraid修复raid1掉线硬盘 使用说 ...
- IEEE 网址
https://ieeexplore.ieee.org/document/506397
- 5.8-12 watch、which、whereis、locate、updatedb
5.8 watch:监视命令执行情况 watch命令可以以全屏的方式动态显示命令或程序的执行情况. -n 命令执行的间隔时间,默认为2s -d 高亮显示命令结果的变动之处 -t ...
- 记一次zabbix-server故障恢复导致的事故 zabbix-server.log -- One child process died
前言 zabbix-server昨天出了个问题,不停的重启.昨天摆弄到晚上也不搞清楚原因,按照网上说的各种操作,各种CacheSize.TimeOut.StartPollers都改了,还有什么Incl ...
- 在js中将map对象转换成json 和 js对cookie的操作
在js中将map对象转换成json //msp转objectlet obj= Object.create(null); for (let[k,v] of map) { obj[k] = v; }//o ...
- (最新)VS2015安装以及卸载过程——踩坑实录
前言 Visual Studio (简称VS)是微软公司旗下最重要的软件集成开发工具产品.是目前最流行的 Windows 平台应用程序开发环境,也是无数人学习编程的入门软件之一.Visual Stud ...
- Azure DevOps(二)利用Azure DevOps Pipeline 构建基础设施资源
一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...
- C++ OP相关注意事项
C++ OP相关注意事项 Paddle中Op的构建逻辑 1.Paddle中Op的构建逻辑 Paddle中所有的Op都继承自OperatorBase,且所有的Op都是无状态的,每个Op包含的成员变量只有 ...
- TensorFlow反向传播算法实现
TensorFlow反向传播算法实现 反向传播(BPN)算法是神经网络中研究最多.使用最多的算法之一,用于将输出层中的误差传播到隐藏层的神经元,然后用于更新权重. 学习 BPN 算法可以分成以下两个过 ...
- 摄像头ISP系统原理(上)
摄像头ISP系统原理(上) ISP(Image Signal Processor),即图像信号处理器,用于处理图像信号传感器输出的图像信号.它在相机系统中占有核心主导的地位,是构成相机的重要设备. 主 ...