事件处理-526互联

事件绑定

如何给按钮绑定事件：v-on:click="方法(实参1,...,$event)"

另一种简写：使用@代替v-on:click

Vue的元素methods：{}用于配置每一个方法

$event: event的占位符

event作用：获取触发事件的元素标签

<body>

    <!-- 定义一个vue容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo(55,$event)">点我提示！</button>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(number,event){
                    alert('同学早上好！');
                    console.log(event.target.innerText)
                }
            }
        })
    </script>
</body>

事件修饰符

prevent stop faw1nce

prevent : 阻止默认事件；

stop : 阻止事件冒泡；

once: 事件只触发一次。

事件冒泡：在嵌套div中，同一个事件在多个div上绑定，事件触发多次。

键盘事件

格式：@keyup.按键名或 @keydown.按键名 = “方法”

按键	按键名
回车	enter
退出	esc
空格	space
换行	tab
上下左右	up down left right

<body>
    <!-- 定义一个vue容器 -->
    <div id="root">
        <h3>欢迎来到{{name}}学习</h3>
        <input @keydown.tab="showInfo" type="text" placeholder="按下回车键提交">
    </div>
</body>