第一句子网 > 07——Vue 中的事件处理以及事件修饰符键盘事件

07——Vue 中的事件处理以及事件修饰符键盘事件

时间：2020-11-15 03:19:58

Vue 中的事件处理

案例一：事件的基本使用1、问题一：showInfo 方法可以接收参数嘛？2、v-on:click="showInfo 的简写形式"3、需求问题一：事件传参4、总结事件修饰符1、prevent 阻止事件修饰符键盘事件

案例一：事件的基本使用

页面

1、问题一：showInfo 方法可以接收参数嘛？

<body><div id="root"><h2>欢迎来到{{name}}学习</h2><Button v-on:click="showInfo">点我提示信息</Button></div></body><script type="text/javascript">Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',},methods:{showInfo(event) {// alert('同学你好')console.log(event.target.innerText)// console.log(this); // 此处的 this 是vm对象}}}) // console.log(vm);</script>

可以传递参数

2、v-on:click=“showInfo 的简写形式”

<div id="root"><h2>欢迎来到{{name}}学习</h2><Button v-on:click="showInfo">点我提示信息</Button><Button @click="showInfo">点我提示信息</Button></div>

3、需求问题一：事件传参

想通过事件处理的方法传递一个数字值，怎么传递？

类似于页面点击删除按钮，将学生 id 通过方法传递过来

页面

4、总结

事件的基本用法

1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名2、事件的回调需要配置在methods对象中，最终会在vm上3、methods中配置的函数，不要用箭头函数，否则 this 就不是vm了4、methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参

事件修饰符

1、prevent 阻止事件修饰符

Vue中的事件修饰符

1、prevent 阻止默认事件（常用）2、stop 阻止事件冒泡（常用）3、once 事件只触发一次（常用）4、capture 使用事件的捕获模式5、self 只有event.target是当前操作的元素时才触发事件6、passive 事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修饰符</title><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.demo1 {height: 50px;background-color: skyblue;}.box1 {padding: 5px;background-color: skyblue;}.box2 {padding: 5px;background-color: orange;}.list {width: 200px;height: 20px;background-color: peru;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h2>欢迎来到{{name}}学习</h2><a href="" @click.prevent="showInfo">点我提示信息</a><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><button @click.once="showInfo">点我提示信息</button><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><div class="demo1" @click.self="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',},methods:{showInfo(e) {// e.preventDefault()// 阻止默认行为alert('同学你好')},showMsg(msg) {console.log(msg);},demo() {console.log('@');}}}) // console.log(vm);</script></html>