Vue中v-on的基础用法、参数传递和修饰符的示例详解
一、v-on的基本用法
使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的<button @click="increment">加</button>。
以简单的计数器为例
<body>
<div id="app">
<h2>{{count}}</h2>
<!-- <button v-on:click="count++">加</button>
<button v-on:click="count--">减</button> -->
<button @click="increment">加</button>
<button @click="decrement">减</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
count:0
},
methods: {
increment(){
this.count++
},
decrement(){
this.count--
}
}
})
</script>
</body>
二、v-on的参数传递
在methods中定义的方法，我们可以进行调用，可以带上（），也可以不带（）
如下的btnClick的调用中，加了（）想要调用，里面必须要有值，如果不加小括号,就只会调用事件对象。
btnClick3想要传入event，需要在调用时写$event,才能调用事件对象。
<div id="app">
<!-- 事件没传参 -->
<button @click="btnClick">按钮1</button>
<button @click="btnClick()">按钮2</button>
<!-- 事件调用方法传参，写函数时候省略小括号，但是函数本身需要传递一个参数 -->
<button @click="btnClick2(123)">按钮3</button>
<button @click="btnClick2()">按钮4</button>
<button @click="btnClick2">按钮5</button>
<!-- 事件调用时候需要传入event还需要传入其他参数 -->
<button @click="btnClick3($event,123)">按钮6</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("点击XXX");
},
btnClick2(value){
console.log(value+"----------");
},
btnClick3(event,value){
console.log(event+"----------"+value);
}
}
})
</script>
事件没传参，可以省略()事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。
三、v-on的修饰词
.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
.prevent调用event.preeventDefault阻止默认行为。
.enter监听键盘事件;
once事件只触发一次（常用）；
capture使用事件的捕获模式；
self只有event.target是当前操作的元素时才触发事件；
passive事件的默认行为立即执行，无需等待事件回调执行完毕；
<style>
.div {
height:80px;
background:#f00;
}
</style>
</head>
<body>
<div id="app">
<!--1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() -->
<div @click="divClick">
<button @click.stop="btnClick">按钮1</button>
</div>
<!-- 2. .prevent 调用event.preeventDefault阻止默认行为 -->
<form action="www.baidu.com">
<button type="submit" @click.prevent="submitClick">提交</button>
</form>
<!--3. 监听键盘的事件 -->
<form @submit.prevent=''>
账号<input type="text" name="user"/>
密码<input type="text" name="password" @keyup.enter="submit"/>
<input type="submit" value="登录"/>
</form>
<!--4. 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!--5. capture使用事件的捕获模式 -->
<div class="box1" @click.capture="show(111)">
div1外面
<div class="box2" @click="show(222)">
div2里面
</div>
</div>
<!-- 6.只有event.target是当前操作的元素时才触发事件 -->
<div class="div" @click.self="showself">
<button @click="showself">点我</button>
</div>
<!-- 7.passive事件的默认行为立即执行，无需等待事件回调执行完毕 -->
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("点击button");
},
divClick(){
console.log("点击div");
},
submitClcik(){
console.log("提交被阻止了")
},
submit(){
console.log("keyup点击")
},
showInfo(){
alert('web学习真有趣')
},
show(msg){
console.log(msg)
},
showself(e){
console.log(e.target);
},
}
})
</script>
</body>
到此这篇关于Vue中v-on的基础用法、参数传递和修饰符的文章就介绍到这了,更多相关Vue中v-on参数传递和修饰符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue组件之间的参数传递与方法调用的实例详解
目录 父组件向子组件 子组件调用父组件方法 其它组件间调用 补充: 父组件向子组件 1.父组件向子组件传参:父组件中的子组件标签中增加 :param="param" 子组件中增加 props 接受参数(注意props需要与data同级) props: { param: { type: Object } }, data() { return { ... } }, 2.父组件调用子组件方法:父组件中子组件的标签增加 ref="abc" 例如: <child ref
-
关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)
目录 1.解决this.$emit无效问题 2.Vuex问题 3.总结 之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是: 1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中. 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化). 3.如果您有Vue
-
vue组件间的参数传递实例详解
场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo
-
vue中实现methods一个方法调用另外一个方法
vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this
-
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解. 举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到.而在以Vue作为核心框架的前端项目中,因
-
vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this
-
Vue中v-on的基础用法、参数传递和修饰符的示例详解
一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <
-
Java中的权限修饰符(protected)示例详解
前言 大部分来自:https://blog.csdn.net/justloveyou_/article/details/61672133.并在这个博客的基础上,加上了自己的一些理解. 权限控制表 修饰词 本类 同一个包的类 继承类 其他类 private √ × × × 无(默认) √ √ × × protected √ √ √ × public √ √ √ √ 关于protected 最近在看Effective Java时,遇到了一个关于protected修饰符的问题.这个问题中,对于它的认识
-
Go语言基础Json序列化反序列化及文件读写示例详解
目录 概述 JSON序列化 结构体转JSON map转JSON 切片转JSON JSON反序列化 JSON转map JSON转结构体 JSON转切片 写JSON文件 map写入JSON文件 切片写入JSON文件 结构体写入JSON文件 读JSON文件 解码JSON文件为map 解码JSON文件为切片 解码JSON文件为结构体 示例 概述 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的.键值对的数据交换格式.结构由大括号'{}',中括
-
C语言函数基础教程分类自定义参数及调用示例详解
目录 1. 函数是什么? 2. C语言中函数的分类 2.1 库函数 2.1.1 为什么要有库函数 2.1.2 什么是库函数 2.1.3 主函数只能是main()吗 2.1.4常见的库函数 2.2 自定义函数 2.2.1自定义函数是什么 2.2.2为什么要有自定义函数 2.2.3函数的组成 2.2.4 举例展示 3. 函数的参数 3.1 实际参数(实参) 3.2 形式参数(形参) 4. 函数的调用 4.1 传值调用 4.2 传址调用 4.3 练习 4.3.1. 写一个函数判断一年是不是闰年
-
Vue常用的修饰符的作用详解
目录 一.Vue的修饰符是什么 二.修饰符的作用 1.表单修饰符 2.事件修饰符 3.鼠标按钮修饰符 4.键盘修饰符 5.v-bind修饰符 三.常用的应用场景 一.Vue的修饰符是什么 Vue中的修饰符分为以下五种: 表单修饰符: 事件修饰符: 鼠标按键修饰符: 键值修饰符: v-bind修饰符. 二.修饰符的作用 1.表单修饰符 修饰符 作用 使用 lazy 填完信息,光标离开标签的时候,才会将值赋予给value <input type="text" v-model.lazy
-
vue前端性能优化之预加载和懒加载示例详解
目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的
-
vue中v-model指令与.sync修饰符的区别详解
目录 v-model .sync 细微之处的区别 总结功能作用场景: v-model <!--父组件--> <template> <!--v-model 指令是语法糖--> <Child v-model="model"></Child> <!-- 把 v-model 指令展开后相当于下面的代码 --> <!-- v-model绑定的默认事件是input,默认prop是value属性 --> <Ch
-
vue .sync修饰符的使用详解
vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTi
-
Vue中Table组件Select的勾选和取消勾选事件详解
简述 之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件. 勾选 首先我们需要说一下这个需求,如下图: 勾选要实现如下的一个效果:对左侧Table的内容进行勾选,然后勾选行的数据传给右侧的Table中. 实现代码如下: ============1.按照官网封装好的样式去写Table组件======= <template> <div> <Table>&l
-
详解Vue中Computed与watch的用法与区别
目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp