vue--事件

最新推荐文章于 2022-09-06 14:14:20 发布

weixin_44889992

最新推荐文章于 2022-09-06 14:14:20 发布

阅读量81

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89366152

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

事件基础内容：

属性绑定

function alert(){ alert('hello vue.js') } 2. js操作 // 1. 获取数据 var data = 'hello vue.js' // 2. 获取DOM var app = document.querySelector('#app') // 3. 渲染数据 app.innerHTML = data // 4. 添加事件 app.onclick = function(){ app.style.background = 'red' } 事件的组成部分： 1. DOM 2. on 添加事件的形式 3. 事件类型 click 4. 事件处理函数有上面的总结： vue使用第一种事件添加的形式 ---》 v-on 格式： v-on:eventType = eventFnName 简写： @eventType = eventFnName 事件处理函数写在配置项中 methods中书写步骤：先写方法，再去绑定需求：我们有一个方法，这个方法中有两个参数，第一个参数是自定义参数，第二个参数是事件对象问题：第二个参数事件对象 = undefined\ 原因：当我们自定义参数后，系统无法自动识别，是不是事件对象解决：传入事件对象的实际参数： $event

举例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 事件 </title>
<script src="../../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<h3> 事件添加 </h3>
<button v-on:click = "changeMsg">
{{ msg }}
</button>
<button @click = "changeMsg">
{{ msg }}
</button>
<hr>
<h3> 事件传参 </h3>
<button @click = "argHandler('hello 骏哥~~~')">
eventArgument
</button>
<hr>
<h3> 事件对象 </h3>
<button @click = "eventHandler">
event
</button>
<hr>
<h3> 事件多个参数 </h3>
<button @click = "evHandler('骏哥',$event)">
args
</button>
</div>
</body>
<script>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
methods: {
/* 一个key 就是一个方法 */
changeMsg(){
this.msg = 'hello 我骏哥~~~'
},
argHandler(value){
alert(value)
},
eventHandler(e){
console.log(e)
},
evHandler(arg,e){
console.log(arg)
console.log(e)
}
}
})
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 事件的高级部分 </title>
<script src="../../basic-source/vue.js"></script>
<style>
#app div {
width: 200px;
height: 200px;
background: red;
}
#app p {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click='destory'> 销毁 </button>
<div @click.self="bigHandler" v-if="f">
<p @click.stop='smallHandler'></p>
</div>
<!--
<input type="text" @keyup.space="submitHandler"> -->
<input type="text" @keyup.p="submitHandler">
<h3>自定义事件</h3>
<button @click="myEventHandler">
my-event
</button>
</div>
</body>
<script>
Vue.config.keyCodes.P = 80
var vm = new Vue({
data: {
f: true
},
methods: {
bigHandler(e) {
alert('bigger')
},
smallHandler(e) {
alert('small')
// e.stopPropagation()
},
submitHandler() {
alert('keyup')
},
destory() {
this.f = !this.f
},
myEventHandler() {
this.$emit('my-event')
console.log('events')
}
}
}).$mount('#app')
vm.$on('my-event', function() {
console.log('自定义事件')
})
// vm.$emit('my-event')

</script>
</html>

总结：

事件修饰符
举例：事件冒泡
通过举例告诉大家， e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案：使用事件修饰符(modify)
格式：
v-on:eventType.modify = eventFnName
类型：
.stop : 阻止冒泡行为
.prevent ：阻止浏览器默认行为
.capture ：阻止捕获行为
.self ：自身触发
.once ：只执行一次
.passive ：行为结束后触发（scroll）
按键修饰符（键盘事件 keyup keydown keypress）
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符
全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName
自定义事件(自定义事件类型)
如何定义？
使用new Vue() 的到的实例来定义
vm.$on(eventName,callback)
如何触发呢？
vm. $e m i t (e v e n t N a m e) t h i s .$ emit(eventName)
事件中留有一个知识点：
原生事件调用