vue常见的事件修饰符，你知道多少？ |
您所在的位置：网站首页 › 键盘stop键 › vue常见的事件修饰符，你知道多少？ |
|
关于vue事件修饰符你知道的有多少？
在vue中修饰符分为： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 表单修饰符这个修饰符主要是用在表单常用的指令上,v-model对表单的输入内容进行修饰 关于表单修饰符有以下几个： lazy lazy跟懒加载类似，在表单上我们填写信息的时候不会触发v-model值的变化，只有光标离开的时候才会赋值，也就是在input事件的oninput书法的时候不会赋值，当onchange触发的时候才会进行赋值 {{value}}trim 过滤掉输入内容的前后空格 number 会将输入的值转换为数值类型 ...native 让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件 鼠标按钮修饰符鼠标按钮修饰符针对的就是鼠标的左键（left）、右键（right）和中键（middle）的点击操作，如下： ok ok ok 键盘修饰符键盘修饰符用来修饰键盘的事件（如：onkeyup、onkeydown等），键盘的事件触发需要相对应的keyCode。然而keyCode存在很多，因此为了使用方便Vue给我们提供了别名的修饰符，分为以下两种: 普通按键（enter、delete、space、tab、esc…） 系统修饰键（ctrl、shift、alt…）也可以直接用按键的代码来做修饰符（如：enter为13）官方例子： Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 "media-play-pause": 179, up: [38, 87] 使用方式： } v-bind修饰符v-bind修饰符主要为属性进行操作的，这个也是所有修饰符中最不常用的一类，这些修饰符有： async 能对props进行一个双向绑定 //父组件 func(e){ this.bar = e; } //子组件 func2(){ this.$emit('update:myMessage',params); } 简写： //父组件 //子组件 this.$emit('update:myMessage',params);使用async需要注意以下几点： 1.使用async的时候，自组件传递的事件名必须格式必须为update:value, 其中value必须与自组件中props中声明的名称完全一致 2.注意大理由.sync修饰符的v-bind不能和其他的表达式一起使用 3.将v-bind.sync用在一个字面量的对象上，例如v-bind.sync=“{title: doc.title}”, 是无法正常工作的 props 设置自定义标签属性，避免暴露数据，防止污染HTML结构 应用场景： vue修饰符应用场景 .stop ：阻止事件冒泡 .native :绑定原生事件 .once：事件只执行一次 .self：将事件绑定在自身身上 .prevevt：阻止默认事件 .caption：用于事件捕获 .keyCode：用于键盘监听事件 .right：鼠标右键监听事件 .trim：用于输入框，去除内容前后空格 了解更多点击跳转官网** |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |