一、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用法）

目录