涪城网站建设seo新站如何快速排名
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>
在这个例子中,当触摸屏幕滑动时,不会阻止页面滚动。