Vue 常用修饰符

发表于2025-09-14|更新于2025-12-11|vue框架

|总字数:490|阅读时长:1分钟|浏览量:

Vue 常用修饰符

一、事件修饰符

修饰符	是什么	功能	应用场景
`.stop`	阻止事件冒泡的修饰符	阻止当前事件向父元素冒泡	子元素点击事件不影响父元素
`.prevent`	阻止默认行为的修饰符	阻止标签的默认行为（如 a 标签跳转、表单提交）	自定义表单提交逻辑
`.once`	事件仅触发一次的修饰符	事件绑定后仅执行一次，之后自动解绑	按钮点击后仅响应一次（如提交）
`.self`	仅自身触发的修饰符	仅当事件触发在当前元素本身时才执行	避免父元素冒泡事件触发自身
`.capture`	事件捕获阶段触发的修饰符	事件在捕获阶段（而非冒泡阶段）执行	需要优先处理父元素事件的场景

二、按键修饰符

修饰符	是什么	功能	应用场景
`.enter`	监听回车键的修饰符	仅当按下回车键时触发事件	输入框按回车提交内容
`.tab`	监听 Tab 键的修饰符	仅当按下 Tab 键时触发事件	表单输入框切换焦点
`.delete`	监听删除 / 退格键的修饰符	仅当按下删除 / 退格键时触发事件	输入框内容删除时的逻辑处理
`.esc`	监听 ESC 键的修饰符	仅当按下 ESC 键时触发事件	关闭弹窗、取消输入

三、表单修饰符

修饰符	是什么	功能	应用场景
`.lazy`	懒同步的修饰符	将`v-model`的同步时机从`input`改为`change`	减少输入过程中频繁的数据更新
`.number`	转为数字的修饰符	将输入内容自动转为 Number 类型（非数字则保留字符串）	表单中数字类型的输入框
`.trim`	去除首尾空格的修饰符	自动去除输入内容的首尾空格	用户名、手

文章作者: BoardYoungC

文章链接: http://example.com/2025/09/14/vue/Vue%20%E5%B8%B8%E7%94%A8%E4%BF%AE%E9%A5%B0%E7%AC%A6/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 BoardYoungC！

相关推荐

ES6中 Promise在以往我们如果处理多层异步操作，我们往往会像下⾯那样编写我们的代码 12345671 doSomething(function(result) {2 doSomethingElse(result, function(newResult) {3 doThirdThing(newResult, function(finalResult) {4 console.log('得到最终结果: ' + finalResult);5 }, failureCallback);6 }, failureCallback);7 }, failureCallback); promise 对象仅有三种状态 pending （进⾏中） fulfilled （已成功） rejected （已失败）对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪⼀种状态⼀旦状态改变（从 pending 变为 fulfilled 和从 pending 变为 rejected...

ES6中数组新增扩展

ES6中数组新增了扩展扩展运算符的应⽤ES6通过扩展元素符 … ，好⽐ rest 参数的逆运算，将⼀个数组转为⽤逗号分隔的参数序列 1234561 console.log(...[1, 2, 3])2 // 1 2 33 console.log(1, ...[2, 3, 4], 5)4 // 1 2 3 4 55 [...document.querySelectorAll('div')]6 // [<div>, <div>, <div>] 主要⽤于函数调⽤的时候，将⼀个数组变为参数序列 123456781 function push(array, ...items) {2 array.push(...items);3 }4 function add(x, y) {5 return x + y;6 }7 const numbers = [4, 38];8 add(...numbers) // 42 ES6 允许为函数的参数设置默认值 1234561 function log(x,...

Node 中的 Stream

Node 中的 Stream流（Stream），是⼀个数据传输⼿段，是端到端信息交换的⼀种⽅式，⽽且是有顺序的,是逐块读取数据、处理内容，⽤于顺序读取输⼊或写⼊输出 Node.js 中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位）它的独特之处在于，它不像传统的程序那样⼀次将⼀个⽂件读⼊内存，⽽是逐块读取数据、处理其内容，⽽不是将其全部保存在内存中流可以分成三部分： source 、 dest 、 pipe 在 source 和 dest 之间有⼀个连接的管道 pipe ,它的基本语法是 source.pipe(dest) ， source 和 dest 就是通过pipe连接，让数据从 source 流向了 dest 在 NodeJS ，⼏乎所有的地⽅都使⽤到了流的概念，分成四个种类： • 可写流：可写⼊数据的流。例如 fs.createWriteStream() 可以使⽤流将数据写⼊⽂件 • 可读流：可读取数据的流。例如fs.createReadStream() 可以从⽂件读取内容 • 双⼯流：既可读⼜可写的流。例如 net.Socket •...

Node 中的 Buffer

Node 中的 Buffer在 Node 应⽤中，需要处理⽹络协议、操作数据库、处理图⽚、接收上传⽂件等，在⽹络流和⽂件的操作中，要处理⼤量⼆进制数据，⽽ Buffer 就是在内存中开辟⼀⽚区域（初次初始化为8KB），⽤来存放⼆进制数据在上述操作中都会存在数据流动，每个数据流动的过程中，都会有⼀个最⼩或最⼤数据量如果数据到达的速度⽐进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度⽐进程消耗的数据慢，那么早先到达的数据需要等待⼀定量的数据到达之后才能被处理这⾥的等待区就指的缓冲区（Buffer），它是计算机中的⼀个⼩物理单位，通常位于计算机的 RAM 中简单来讲， Nodejs 不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送时间，则将数据放在 Buffer 中，即在 RAM 中，直⾄将它们发送完毕 Buffer 类在全局作⽤域中，⽆须 require 导⼊创建 Buffer 的⽅法有很多种，我们讲讲下⾯的两种常⻅的形式： • Buffer.from() •...

axios1. axios 是什么axios 是一个基于 Promise 的HTTP 请求库，用于浏览器和 Node.js 环境中发送网络请求（如 GET、POST 等），是 Vue 项目中常用的接口请求工具，支持请求拦截、响应拦截、取消请求等功能。 2. 为什么要封装在 Vue 中封装 axios 主要是为了提升代码的复用性、可维护性与规范性，具体原因包括：统一配置：集中管理请求基地址、超时时间等公共配置；统一拦截：全局处理请求头（如携带 Token）、响应错误（如登录失效、接口报错）；简化调用：封装通用的请求方法（如get/post），减少重复代码；统一规范：约束接口请求的参数格式、响应处理逻辑。 3. 如何封装（Vue2 中）以下是 Vue2 中 axios 的典型封装步骤：（1）创建 axios 实例并配置公共参数12345678// src/utils/request.jsimport axios from 'axios';// 创建axios实例const service = axios.create({ ...

v-show 与 v-if

v-show 与 v-if1. v-show 与 v-if 的共同点二者都是 Vue 中用于控制 DOM 元素显示 / 隐藏的指令，都可以根据表达式的布尔值决定元素是否展示。 2. v-show 与 v-if 的区别维度 v-show v-if 渲染方式始终渲染 DOM，通过display: none控制隐藏条件为false时，不渲染 DOM 到页面切换开销切换时仅修改 CSS，开销小切换时会销毁 / 重建 DOM，开销大初始渲染开销初始渲染需渲染 DOM，开销略大条件为false时不渲染，初始开销小支持场景不能用于<template>标签可以用于<template>标签（分组渲染） 3. v-show 与 v-if 的原理分析 v-show：编译后会给元素添加内联样式display: [条件? 'block' : 'none']，DOM 元素始终存在于文档流中。 v-if：编译时会根据条件生成条件渲染的代码块，条件为false时，对应的 DOM...

数据加载中