Vue 中的事件处理

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

案例一：事件的基本使用

<!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>
</head>
<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() {alert('同学你好')}}}) console.log(vm);
</script>
</html>

页面

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 通过方法传递过来

<!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>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}学习</h2><Button @click="showInfo1">点我提示信息1(不传参)</Button><Button @click="showInfo2($event, 66)">点我提示信息2（传参）</Button></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',},methods:{showInfo1(event) {// alert('同学你好')console.log(event.target.innerText)// console.log(this); // 此处的 this 是vm对象},showInfo2(event,number) {console.log(event, number);alert('同学你好！！')}}}) // console.log(vm);
</script>
</html>

页面

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="http://www.atguigu.com" @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><!-- 只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 @scroll 和 @wheel的区别？--><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>

键盘事件

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

1、Vue中常用的按键别名
回车 enter
删除delete捕获“删除”和“退格”键
退出esc
空格space
换行tab特殊，必须配合keydown去使用
上up
下down
左left
右right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（多单词小写短横线写法）
3、系统修饰键（用法特殊）ctrl alt shift meta（meta就是win键）
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发指定 ctr+y 使用 @keyup.ctr.y
（2）配合keydown使用：正常触发事件
4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!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>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></input></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。vue.config.keyCodes.huiche = 13 // 定义了一个别名按键const vm = new Vue({el:'#root',data:{name:'尚硅谷',},methods:{showInfo(event) {// if (event.keyCode !== 13) {//  return// }// console.log(event.key, event.keyCode);console.log(event.target.value)},}}) // console.log(vm);
</script>
</html>

07——Vue 中的事件处理以及事件修饰符、键盘事件相关推荐

vue 指令 v-on 事件修饰符-键盘事件-键盘事件梳理
<body><div id="app">用户名:<input type="text" v-on:keyup.delete='cle ...
Vue 中的 v-if 和 v-show 修饰符
Vue官网看到的(https://cn.vuejs.org/v2/guide/conditional.html) v-if vs v-show v-if 是"真正的"条件渲染,因为 ...
vue 指令 v-on 事件修饰符-鼠标事件-什么是事件冒泡
什么是事件冒泡 <body><div id="app"><div>{{num}}</div><div v-on:click=' ...
Vue.js：vue指令（给标签属性赋Vue变量v-bind，绑定事件 v-on）vue事件处理函数中, 拿到事件对象，6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
Vue中的事件修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...
Vue 事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...
Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件与父组件传递数据给子组件 -- 方式props ...

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

Vue 中的事件处理

案例一：事件的基本使用

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

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

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

4、总结

事件修饰符

1、prevent 阻止事件修饰符

键盘事件

07——Vue 中的事件处理以及事件修饰符、键盘事件相关推荐

最新文章

热门文章

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

Vue 中的事件处理

案例一：事件的基本使用

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

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

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

4、总结

事件修饰符

1、prevent 阻止事件修饰符

键盘事件

07——Vue 中的事件处理 以及 事件修饰符 、键盘事件相关推荐

最新文章

热门文章

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

07——Vue 中的事件处理以及事件修饰符、键盘事件相关推荐