深圳网站设计公司招聘,江苏国家企业信息系统,网站技术制作,爱佳倍 北京网站系列文章目录
TypeScript 从入门到进阶专栏 文章目录 系列文章目录前言一、事件修饰符#xff08;Event Modifiers#xff09;1、.stop#xff08;阻止事件冒泡#xff09;2、.prevent#xff08;阻止事件的默认行为#xff09;3、.capture#xff08;使用事件捕获模式…
系列文章目录
TypeScript 从入门到进阶专栏 文章目录 系列文章目录前言一、事件修饰符Event Modifiers1、.stop阻止事件冒泡2、.prevent阻止事件的默认行为3、.capture使用事件捕获模式4、.self只当事件在该元素本身而不是子元素触发时触发回调函数5、.once只触发一次回调函数 二、按键修饰符Key Modifiers1、.enter按下回车键时触发2、.tab按下tab键时触发3、.delete按下删除或退格键时触发4、.esc按下ESC键时触发5、.space按下空格键时触发6、.up按下上箭头键时触发7、.down按下下箭头键时触发8、.left按下左箭头键时触发9、.right按下右箭头键时触发 表单输入修饰符Form Input Modifiers)1、.lazy用于将输入事件延迟到change事件之后触发2、.number自动将输入值转为数字类型3、.trim自动去除输入值两端的空白字符 鼠标修饰符Mouse Modifiers1、.left只在鼠标左键点击时触发2、.right只在鼠标右键点击时触发3、.middle只在鼠标中键点击时触发3、.passive指定事件监听器为被动模式可以提升滚动性能 前言 本文是为了系统性的了解vue3中的修饰符方便开发时的使用使用修饰符可以方便地对事件进行控制和处理提升用户体验。 一、事件修饰符Event Modifiers
1、.stop阻止事件冒泡 修饰符.stop是用于阻止事件冒泡的。当一个具有.stop修饰符的事件监听器被触发时该事件将不再向上冒泡到父元素。这意味着如果一个父元素和子元素都有相同类型的事件监听器并且点击了子元素那么只会触发子元素的事件监听器父元素的事件监听器将被忽略。 例如以下代码中的点击事件只会触发handleClick方法而不会触发父元素的事件监听器。
templatediv clickhandleClickbutton click.stophandleClickClick me/button/div
/templatescript
export default {methods: {handleClick() {console.log(Button clicked);},},
};
/script2、.prevent阻止事件的默认行为 .prevent是一个修饰符用于事件处理函数中阻止事件的默认行为。当事件触发时浏览器会执行默认的操作例如提交表单、打开链接等。而使用.prevent修饰符可以阻止这些默认的行为。 使用.prevent修饰符的方式是在事件处理函数的名称后面加上.prevent例如
button click.preventsubmitForm提交表单/button在上述的代码中当按钮被点击时submitForm函数会被调用同时会阻止表单的默认提交行为。
3、.capture使用事件捕获模式 .capture 是一个事件修饰符用于监听一个元素的捕获阶段事件。 事件捕获是浏览器在事件传播过程中的第一个阶段它从顶层元素向下传播到目标元素。而事件冒泡是事件传播的第二个阶段它从目标元素向上冒泡到顶层元素。
使用.capture修饰符可以让一个元素在事件捕获阶段监听某个事件而不是在事件冒泡阶段。
例如我们有一个父组件和一个子组件父组件上有一个div元素和一个子组件的插槽
templatediv click.capturehandleClickslot/slot/div
/template在父组件中我们使用了.capture修饰符来监听div元素的点击事件。这意味着当我们在子组件中点击父组件的插槽时事件会在父组件的div元素上触发先触发父组件的事件处理函数然后再触发子组件的事件处理函数。
templateparent-componentchild-component clickhandleChildClick/child-component/parent-component
/template在子组件中我们也有一个点击事件处理函数handleChildClick它会在子组件的div元素上触发。但是因为我们使用了.capture修饰符所以父组件的点击事件处理函数handleClick会在子组件的事件处理函数之前触发。
.capture修饰符在某些特定的场景下非常有用可以帮助我们更好地控制事件的触发顺序和处理逻辑。
4、.self只当事件在该元素本身而不是子元素触发时触发回调函数 修饰符 .self用于限制事件只能在触发事件的元素本身上触发而不是在子元素上触发。这意味着只有当事件直接在绑定事件的元素上触发时才会执行事件处理函数。 例如我们有一个父元素和一个子元素父元素绑定了一个点击事件子元素是父元素的一个子元素。使用 .self 修饰符可以确保点击子元素时不会触发父元素的点击事件只有当点击父元素本身时才会触发。
templatediv click.selfhandleClickdivClick Me/div/div
/templatescript
export default {methods: {handleClick() {console.log(Clicked on the element itself);}}
}
/script在上面的代码中只有当点击 “Click Me” 文本所在的 div 元素时才会触发 handleClick 方法并打印出信息。如果点击子元素 div则不会触发点击事件。
5、.once只触发一次回调函数 修饰符.once用于绑定一个只能触发一次的事件监听器。 例如
templatebutton click.onceonClickClick me/button
/templatescript
export default {methods: {onClick() {console.log(Button clicked);}}
}
/script在上面的例子中当按钮被点击时onClick方法只会执行一次之后再点击按钮将不再触发该方法。这就是.once修饰符的作用。
二、按键修饰符Key Modifiers
1、.enter按下回车键时触发 .enter 是指在事件处理中只有在按下回车键时才触发事件。 使用 .enter 修饰符可以方便地处理键盘事件当用户在输入框中按下回车键时可以触发特定的操作。
例如在一个表单中用户在输入框中输入完内容后按下回车键可以提交表单数据。
使用 .enter 修饰符的语法如下
input v-on:keyup.entersubmitForm上述代码中v-on:keyup.enter 表示当用户在输入框中按下回车键时会触发 submitForm 方法。
除了可以在 v-on 指令中使用 .enter 修饰符外还可以在 v-model 指令中使用例如
input v-model.lazy.entermessage上述代码中v-model.lazy.enter 表示当用户在输入框中输入内容并按下回车键时会将输入的内容绑定到 message 变量中。
2、.tab按下tab键时触发 使用 .tab 修饰符可以让 Vue 组件在用户按下 Tab键时触发相应的事件处理函数。这在处理键盘导航或者表单中的焦点切换时非常有用。 以下是一个示例演示了如何使用 .tab 修饰符监听 Tab 键事件
templatedivinput refinput1 v-on:keydown.tabonTabinput refinput2 v-on:keydown.tabonTab/div
/templatescript
export default {methods: {onTab(event) {if (event.target this.$refs.input1) {// 当按下 Tab 键时焦点从 input1 切换到 input2this.$refs.input2.focus();} else if (event.target this.$refs.input2) {// 当按下 Tab 键时焦点从 input2 切换到 input1this.$refs.input1.focus();}}}
}
/script在上述示例中我们给两个 input 元素绑定了相同的 v-on:keydown.tab 指令并在事件处理函数中根据当前的焦点位置切换焦点到另一个 input 元素上。当用户按下 Tab 键时Vue 会自动调用对应的事件处理函数。
通过使用 .tab 修饰符我们可以更方便地处理键盘导航和焦点切换从而提升用户体验。
3、.delete按下删除或退格键时触发 .delete修饰符监听删除或退格键的按下事件。.delete修饰符是针对键盘事件的修饰符之一。 下面是一个示例演示了如何在Vue 3中使用.delete修饰符来触发事件
templatediv keydown.deletedeleteItemDelete an item/div
/templatescript
export default {methods: {deleteItem() {// 在这里执行删除逻辑console.log(Delete key pressed);}}
}
/script在这个示例中我们在div元素上使用了keydown.delete事件监听器它会在按下删除或退格键时触发deleteItem方法。在deleteItem方法中你可以执行你想要的删除操作。
请注意.delete修饰符适用于Vue 3中的其他键盘事件修饰符例如.enter、.tab等。
4、.esc按下ESC键时触发 .esc按键修饰符来监听Esc键的按下事件。 例如在模板中可以将keydown.esc绑定到一个方法上当用户按下Esc键时该方法会被调用。
templatedivinput typetext keydown.eschandleEscKey //div
/templatescript
export default {methods: {handleEscKey() {// 处理Esc键按下事件的逻辑}}
}
/script在上面的例子中当用户在input输入框中按下Esc键时会调用handleEscKey方法来处理按键事件。你可以在该方法中添加你想执行的逻辑。
5、.space按下空格键时触发 .space是一个按键修饰符用于检测空格键的按下事件。可以用于监听按钮的按下事件并在特定场景下执行相应的操作。 以下是使用.space按键修饰符的示例
templatedivbutton keydown.spacehandleSpace按下空格键/button/div
/templatescript
export default {methods: {handleSpace() {console.log(空格键被按下了);}}
}
/script在上面的示例中当用户按下空格键时handleSpace方法会被调用并在控制台中打印出空格键被按下了的消息。
请注意.space只能检测到按下空格键的事件如果需要检测空格键的释放事件可以使用.space.up。
6、.up按下上箭头键时触发 使用.up按键修饰符来捕获上方向键的按下事件。这可以用于处理上方向键的按下事件例如在下拉菜单中选择上一个选项。 你可以在Vue模板中的事件处理器中使用.up按键修饰符如下所示
templatediv keydown.uphandleUpArrow/div
/template在上面的例子中handleUpArrow函数将在按下上方向键时触发。
7、.down按下下箭头键时触发
.down修饰符用于指定在按下键时触发事件的条件。
例如将按键修饰符.down应用于v-on指令表示只有在同时按下键盘上的Down箭头键时才触发事件。
templatedivinput typetext v-on:keydown.downhandleKeyDown //div
/templatescript
export default {methods: {handleKeyDown(event) {console.log(Down Arrow Key Pressed);},},
};
/script在上述示例中当按下键盘上的Down箭头键时handleKeyDown方法将被调用并在控制台中打印Down Arrow Key Pressed。
8、.left按下左箭头键时触发 按键修饰符可以用于监听特定的键盘事件。左箭头键的修饰符是.left。 使用方式如下
templatediv keydown.lefthandleLeftKey/div
/templatescript
export default {methods: {handleLeftKey(event) {// 处理左箭头键的逻辑}}
}
/script在上面的示例中我们在div元素上使用了keydown.left事件监听器当用户按下左箭头键时会触发handleLeftKey方法。你可以在handleLeftKey方法中编写适当的逻辑来处理左箭头键事件。
9、.right按下右箭头键时触发 按键修饰符用于监听按键事件并进行相应的操作。使用 .right 按键修饰符可以监听右箭头键的按下事件。 以下是一个示例
templatediv keydown.righthandleKeyDownPress the right arrow key/div
/templatescript
export default {methods: {handleKeyDown(event) {if (event.code ArrowRight) {// 在这里执行相应的操作}}}
}
/script在上面的示例中当右箭头键被按下时handleKeyDown 方法会被调用并且只有当按下的键是右箭头键时才会执行相应的操作。
表单输入修饰符Form Input Modifiers)
1、.lazy用于将输入事件延迟到change事件之后触发 表单输入修饰符.lazy用于将输入事件延迟到change事件之后触发而不是在每次输入时触发。这可以减少不必要的输入事件触发次数提升性能。 使用.lazy修饰符的示例
input v-model.lazymessage /在上述示例中v-model.lazy绑定了message数据并且在每次输入时不会立即更新message的值而是在change事件触发时更新。这意味着用户需要离开输入框或者按下回车键才会触发数据的更新。
.lazy修饰符适用于一些场景例如在输入框内容较多或者输入频率较高时可以减少不必要的输入事件触发提高性能。但是需要注意的是由于输入事件延迟触发可能会导致输入框的值与数据绑定的值存在一定的延迟。
在Vue 2中使用.lazy修饰符时是通过v-model.lazy来实现的而在Vue 3中v-model已经内置了.lazy修饰符所以只需要使用v-model即可。
2、.number自动将输入值转为数字类型 .number修饰符来将表单输入的值转换为数字类型。 使用.number修饰符的方式如下所示
input v-model.numbermyNumber typetext在上述示例中通过v-model.number指令绑定一个数据属性myNumber来实现双向绑定。当用户在输入框中输入一个字符串时Vue会自动将其转换为数字类型并将结果保存在myNumber属性中。
需要注意的是如果用户输入的值无法转换为数字类型Vue会将其视为无效的输入。
3、.trim自动去除输入值两端的空白字符 .trim修饰符来去除表单输入框中的前导和尾随空格。这个修饰符可以与v-model指令一起使用以确保用户输入的值不包含空格。 例如假设我们有一个输入框我们需要去除前导和尾随空格。我们可以通过在v-model后面加上.trim修饰符来实现
templateinput v-model.trimtext typetext placeholder请输入文本 /
/templatescript
export default {data() {return {text: ,};},
};
/script现在无论用户在输入框中输入的值是否包含空格text的值都将自动去除前导和尾随空格。
请注意.trim修饰符只能应用于v-model指令它不适用于其他指令或绑定。
鼠标修饰符Mouse Modifiers
1、.left只在鼠标左键点击时触发 .left是一个鼠标修饰符用于监听鼠标左键的点击事件。 例如以下代码中的click.left会在鼠标左键点击时触发事件处理函数
templatebutton click.lefthandleClick点击我/button
/templatescript
export default {methods: {handleClick() {console.log(鼠标左键点击);}}
}
/script当用户点击按钮时会在控制台输出鼠标左键点击。这是因为.left修饰符限定了只有在鼠标左键点击时才触发事件处理函数。
2、.right只在鼠标右键点击时触发
在Vue 3中你可以使用.right鼠标修饰符来指定只有右键点击事件才会触发相应的事件处理程序。这个修饰符可以用于v-on指令中。
例如你可以这样使用它
button v-on:click.righthandleRightClick右键点击/button在上面的示例中只有右键点击按钮时才会触发handleRightClick方法。
3、.middle只在鼠标中键点击时触发 鼠标修饰符是指在特定的事件处理函数中使用不同的鼠标按键触发事件。对于中键按钮可以使用.middle修饰符。 例如当你需要在鼠标中键点击时触发一个事件处理函数你可以这样写:
button click.middlehandleMiddleClick中键点击/button在上面的例子中当用户在按钮上点击中键时handleMiddleClick函数将被调用。
3、.passive指定事件监听器为被动模式可以提升滚动性能 鼠标修饰符中的passive修饰符用于改善页面的滚动性能。传统上当一个滚动事件被触发时浏览器将等待所有的事件处理程序完成后再执行滚动操作。但是使用passive修饰符可以告诉浏览器事件处理程序不会调用preventDefault()来阻止滚动行为从而使得浏览器可以在滚动操作即将发生时立即进行滚动处理提高滚动的流畅度和响应性能。 使用passive修饰符非常简单只需在事件监听的时候添加passive修饰符即可。例如
templatediv scroll.passivehandleScrollScrollable content/div
/templatescript
export default {methods: {handleScroll() {// 处理滚动事件的代码}}
}
/script在上述示例中当div元素发生滚动事件时会调用handleScroll方法。并且使用了passive修饰符告诉浏览器该事件处理程序不会阻止滚动行为。
总而言之passive修饰符可以帮助优化滚动性能特别是在处理滚动事件时使用passive修饰符可以提高滚动的流畅度和响应性能。
