您现在的位置是：网站首页> 编程资料编程资料
Vue常用的修饰符的作用详解_vue.js_
2023-05-24
345人已围观
简介 Vue常用的修饰符的作用详解_vue.js_
一、Vue的修饰符是什么
Vue中的修饰符分为以下五种：
- 表单修饰符；
- 事件修饰符；
- 鼠标按键修饰符；
- 键值修饰符；
- v-bind修饰符。
二、修饰符的作用
1、表单修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| lazy | 填完信息，光标离开标签的时候，才会将值赋予给value | |
| trim | 自动过滤用户输入的首空格字符，中间的空格不会过滤 | |
| number | 自动将用户输入的值转为数值类型，如果不能被parseFloat解析，会返回原来的值 |
2、事件修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| stop | 阻止了事件冒泡 ，相当于调用了event.stopPropagation | //只输出1 |
| prevent | 阻止了事件的默认行为，相当于调用了event.preventDefault方法 | |
| once | 绑定了事件以后只能触发一次，第二次就不会触发 |
3、鼠标按钮修饰符
left左键点击、right右键点击、middle中键点击
4、键盘修饰符
键盘修饰符用来修饰键盘事件（onkeyup,onkeydown）的，有如下：
- 普通键（enter、tab、delete、space、esc、up…）
- 系统修饰键（ctrl、alt、meta、shift）
// 只有按键为keyCode的时候才触发
还可以通过以下方式自定义一些全局的键盘码别名
Vue.config.keyCodes.f2 = 113
5、v-bind修饰符
props设置自定义标签属性，避免暴露数据，防止污染HTML结构
三、常用的应用场景
| 修饰符 | 应用场景 |
|---|---|
| .stop | 阻止事件冒泡 |
| .native | 绑定原生事件 |
| .once | 事件只执行一次 |
| .self | 将事件绑定在自身身上，相当于阻止事件冒泡 |
| .prevent | 阻止默认事件 |
| .caption | 用于事件捕获 |
| .once | 触发一次 |
| .keyCode | 监听特定键盘按下 |
| .right | 右键 |
到此这篇关于Vue常用的修饰符的作用详解的文章就介绍到这了,更多相关Vue修饰符内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章:
相关内容
- Vue虚拟DOM详细介绍_vue.js_
- node.js报错:npm ERR code EPERM的解决过程_node.js_
- React前端渲染优化--父组件导致子组件重复渲染的问题_React_
- Vue3 使用v-md-editor如何动态上传图片的方法实现_vue.js_
- 使用JavaScript和CSS实现简单的字符计数器_javascript技巧_
- 详解ES6 中的迭代器和生成器_javascript技巧_
- uni-app调取接口的3种方式以及封装uni.request()详解_javascript技巧_
- uniapp开发微信小程序自定义顶部导航栏功能实例_javascript技巧_
- 微信小程序全局配置之tabBar实战案例_javascript技巧_
- JavaScript进阶教程之非extends的组合继承详解_javascript技巧_
