当前位置：首页 > news >正文

Vue学习笔记（2）

news 2025/8/4 17:23:14

2.1 事件处理

2.1.1 事件监听器

JavaScript：通过获取DOM对象再往DOM对象上使用addEventListener注册监听事件
const btn = document.querySelector('#my-button')
btn.addEventListener('click', function() {alert('点击事件!')
})
jQuery：通过$选择器绑定对象再使用on进行注册监听事件
$('#my-button').on('click', function() {alert('点击事件!')
})
Vue：监听事件和数据绑定结合得更加紧密，可以通过事件处理函数直接访问组件实例中的数据，通过v-on或@进行注册监听事件
<template><button @click="handleClick1">点击!</button><button v-on="handleClick2">点击!</button>
</template><script>
export default {methods: {handleClick1() {alert('点击事件1')},handleClick2() {alert('点击事件2')},}
}
</script>

2.1.2 键盘属性

JavaScript获取方式：

在 JavaScript 中，键盘事件相关的属性有 key、keyCode 和 code，它们分别表示不同的含义。

key 属性：表示键盘按键的字符串值，是一个标准的字符串，比如 a、b、Enter、ArrowDown 等等，可以区分大小写。这个属性在处理文本输入的时候非常有用。
keyCode 属性：表示键盘按键的数字码，是一个整数值，每个键都有一个唯一的数字码，比如 65 表示字母 A。这个属性在处理非文本输入的时候非常有用，比如控制游戏角色的移动方向等。
code 属性：表示键盘按键的物理码，是一个字符串，与键盘布局相关，而不是与字符编码相关。不同的键盘布局可能会有不同的 code 值，比如在 QWERTY 键盘布局下，字母 a 和 q 的 code 值是不同的。这个属性在处理键盘布局相关的情况下非常有用。

需要注意的是，虽然这些属性的用途有所区别，但在不同的浏览器和操作系统下，它们的行为可能会有所不同。

Vue获取方式：
在Vue中除了可以使用原生JavaScript的方式获取键盘属性，还可以使用@keyup或@keydown直接通过 . 进行对键盘事件的监听。
<template><div><input type="text" @keyup.enter="handleEnter"></div>
</template><script>
export default {methods: {handleEnter(event) {alert('回车事件')}}
}
</script>

2.2 绑定样式

在 Vue 中，绑定样式可以通过 v-bind:class 和 v-bind:style 指令来实现。

2.2.1 绑定class

可以通过 v-bind:class 指令来动态绑定元素的 class 属性
<template><div :class="{ active: isActive, 'text-bold': isBold }"></div>
</template><script>
export default {data() {return {isActive: true,isBold: false}}
}
</script>
在这个例子中，<div> 元素的 class 属性会根据 isActive 和 isBold 数据属性的值动态变化。当 isActive 为 true 时，元素会添加 active 类；当 isBold 为 true 时，元素会添加 text-bold 类。

如果需要绑定多个类名，可以通过对象语法和数组语法来实现
<template><div :class="[{ active: isActive }, classList]"></div>
</template><script>
export default {data() {return {isActive: true,classList: ['text-bold', 'bg-red']}}
}
</script>
在这个例子中，<div> 元素的 class 属性会根据 isActive 和 classList 数据属性的值动态变化。classList 是一个数组，包含了元素需要添加的其他类名。

2.2.2 绑定style

可以通过 v-bind:style 指令来动态绑定元素的 style 属性
<template><div :style="{ color: textColor, fontSize: textSize + 'px' }"></div>
</template><script>
export default {data() {return {textColor: 'red',textSize: 14}}
}
</script>
在这个例子中，<div> 元素的 style 属性会根据 textColor 和 textSize 数据属性的值动态变化。textColor 表示文本颜色，textSize 表示文本大小。

如果需要绑定多个样式，可以通过对象语法和数组语法来实现
<template><div :style="[baseStyles, additionalStyles]"></div>
</template><script>
export default {data() {return {baseStyles: {color: 'red',fontSize: '14px'},additionalStyles: {backgroundColor: 'blue',fontWeight: 'bold'}}}
}
</script>
在这个例子中，<div> 元素的 style 属性会根据 baseStyles 和 additionalStyles 数据属性的值动态变化。baseStyles 和 additionalStyles 都是对象，包含了需要添加的样式。如果有相同的样式属性，后面的样式会覆盖前面的样式。

2.3 Vue的事件修饰符

在 Vue 中，事件修饰符是指用来简化事件监听的一些特殊指令。事件修饰符可以通过在事件后面加上特殊的符号来实现，例如 .stop、.prevent 等。下面介绍一些常用的事件修饰符及其作用：

.stop：阻止事件冒泡。

例如：
<button @click.stop="onClick">点击</button>
在这个例子中，当点击 <button> 元素时，不会触发其父元素的 click 事件。

.prevent：阻止事件默认行为。

例如：
<form @submit.prevent="onSubmit">
</form>
在这个例子中，当表单提交时，不会重新加载页面。

.capture：添加事件监听器时使用事件捕获模式。

例如：
<div @click.capture="onClick">点击</div>
在这个例子中，当点击 <div> 元素时，先触发它的祖先元素的 click 事件，再触发自身>的 click 事件。

.self：只当事件在该元素本身触发时才会触发回调。

例如：
<div @click.self="onClick">点击</div>
在这个例子中，当点击 <div> 元素本身时，才会触发 click 事件，如果点击 <div> >的子元素，则不会触发。

.once：只触发一次回调。

例如：
<button @click.once="onClick">点击</button>
在这个例子中，当点击 <button> 元素时，只会触发一次 click 事件。

.passive：指定事件监听器不会调用 preventDefault()。

例如：
<div @touchmove.passive="onTouchMove">滑动</div>
在这个例子中，当触摸屏幕滑动时，不会阻止页面滚动。