一、v-on的基本使用

1.基本形式

两个点击按钮所执行的操作的相同的，1和2的区别在于，1的简写形式就是2。

 <div id="app"><button v-on:click="change()">点击</button>  <!-- 1 --><button @click="change2()">点击</button> <!-- 2 --></div><script>const vm = new Vue({el: '#app',data() {return {}},methods: {change() {console.log('1111');},change2() {console.log('2222');}}})</script>

2.案列展示

通过点击'+','-'按钮实行显示数字的增减。

 <div id="app"><button @click="sum++">+</button><div>{{sum}}</div><button @click="sum--">-</button></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#app',data() {return {sum: 0,}},})</script>

二、v-on的参数传递

1.基本传参

<div id="app"><button @click="handle(4418)">点击</button></div>
<script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {},methods: {handle: function (p) {console.log(p)}}})

点击按钮后，生成传入的值4418。

事件没传参，可以省略()。

事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去。

2.传其他参数

    <div id="app"><button @click="handle(4418,$event)">点击</button></div>
<script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {},methods: {handle: function () {// console.log(p)console.log(event.target.tagName);   // 获取对象console.log(event.target.innerHTML);  //获取标签   innerHTML获取里面内容}}})</script>

三、v-on的修饰词

1.阻止冒泡事件（stop，prevent）

没有阻止冒泡事件，所有功能正常。

由于版权问题，无法展示跳转至百度。

    <div id="app"><div>{{num}}</div><div v-on:click="handle"><button v-on:click.stop="handle1">点击</button></div><a href="https://www.baidu.com/" v-on:click.prevent="handle1">百度</a></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {num: 0},methods: {handle: function () {this.num++;event.stopPropagation();},handle1: function (event) {},}})</script>

使用冒泡后:

2.修饰词可以串联

<div id="app"><div @click="divClick" class="div"><a href="http://www.baidu.com" @click.stop.prevent="change">去百度</a></div>
</div>
<script>const vm = new Vue({el: '#app',data() {},methods: {change()  {console.log('阻止了默认行为也阻止了冒泡');},}})
</script>

3.其他修饰词（不常用）

添加事件监听器时使用事件捕获模式。 capture

只当在 event.target 是当前元素自身时触发处理函数。 prevent

点击事件将只会触发一次。 once

.passive 修饰符尤其能够提升移动端的性能。 .passive

四、案例——简易计算器

    <div id="app"><div>请输入第一位数：<input type="text" v-model="a"></div><div>请输入&nbsp; &nbsp;运算符：<input type="text" v-model="b"></div><div>请输入第二位数：<input type="text" v-model="c"></div><button @click="handle">计算</button><div>计算的结果为: <span v-text="msg"></span></div></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: '',a: '',b: '',c: '',},methods: {                    handle() {if (this.b == '+') {this.msg = parseInt(this.a) + parseInt(this.c);} else if (this.b == '-') {this.msg = parseInt(this.a) - parseInt(this.c);} else if (this.b == '*') {this.msg = parseInt(this.a) * parseInt(this.c);} else {this.msg = parseInt(this.a) / parseInt(this.c);}}}})</script>

Vue事件绑定（v-on用法）相关推荐

Vue事件绑定（非常详细哦~）
下面是对Vue中事件绑定的整理,希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= 'button"v-on:click=&quo ...
Vue 事件绑定事件修饰符条件判断循环遍历
事件绑定 v-on:事件简写:@事件 <div id="app"><h2>{{counter}} </h2><button v-on:c ...
Vue 事件绑定与解绑
目录事件绑定基础知识使用场景注意事项 v-on 绑定事件语法实例 $ref绑定事件语法实例事件解绑语法实例事件绑定基础知识使用场景子组件==>父组件传数据在父组件 ...
Vue事件绑定以及事件修饰符
事件要理解事件绑定,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型: 鼠标键盘事件鼠标键盘事件事件介绍 onclick ...
vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', .... dataList:[] }, ...
vue事件修饰符：通过@click.capture捕获内层事件（爷爷-父亲-儿子）
vue事件符的.capture用法,含义是捕获. 先看一个4层结构的div盒子:div(最外层) > div(爷爷) > div(父亲) > div(儿子) <template ...
vue 事件调用传参_Vue 事件如何传递参数？
Vue 事件如何传递参数? 事件函数参数传递: 普通参数和事件对象传递格式如下: 调用函数传参点秋香 vue事件绑定-参数传递实例如下: vue事件绑定-参数传递 xinbiancheng.cn { ...
【每日知识】Vue事件修饰符.native
问题在写代码时注意到click事件的native修饰符,如下: <el-dropdown-item divided @click.native="logout">&l ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...

Vue事件绑定（v-on用法）

目录