vue学习--模板语法(三、事件绑定)

合集 - Vue学习(5)

1.vue学习--模板语法(一、概述&基本使用)2022-09-152.vue学习--模板语法(二、指令&数据绑定)2022-09-15

3.vue学习--模板语法(三、事件绑定)2022-09-15

4.vue学习--模板语法(四、属性样式绑定&流程语句)2024-05-095.vue学习--模板语法(五、选项卡案例)2024-05-09

收起

事件绑定

1.Vue如何处理事件？

• v-on 指令用法

<input type = 'button' v-on:click = 'num++'/>

• v-on 简写形式

<input type = 'button' @click = 'num++'/>

2.事件函数的调用方式

• 直接绑定函数名称

<button v-on:click='say'>Hello</button>

• 调用函数

<button v-on:click='say()'>Say hi</button>

3.事件函数参数传递

• 普通参数和事件对象

<button v-on:click='say("hi",$event)'>Say hi</button>

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。

如果事件绑定函数调用，那么事件对象必须作为最后一个参数传递，并且事件对象的名称必须是$event。

4.事件修饰符

• .stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

• .prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

5.按键修饰符

• .enter 回车键

<input v-on:keyup.enter='submit'>

• .delete 删除键

<input v-on:keyup.delete ='handle'>

6.自定义按键修饰符

• 全局config.keyCodes对象

Vue.config.keyCodes.f1 = 112

案例：简单计算器

①通过v-model指令实现数值a和数据b的绑定

②给计算按钮绑定事件，实现计算逻辑

③将计算结果绑定到对应位置

 <div id="app">
        <h1>简单计算器</h1>
        <div>
            <span>数值A：</span>
            <span><input type="text" v-model="a"></span>
        </div>
        <div>
            <span>数值B：</span>
            <span><input type="text" v-model="b"></span>
        </div>
        <div>
            <button v-on:click='handle'>计算</button>
        </div>
        <div>
            <span>计算结果：</span>
            <span v-text='result'></span>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                result: ''
            },
            methods: {
                handle: function () {
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            }
        });
    </script>