vue事件修饰符,vue常见修饰符

1.v-on 修饰符 .stop - 调用 event.stopPropagation()，禁止事件冒泡。.prevent - 调用 event.preventDefault()，阻止事件默认行为。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。.left - (2.2.0) 只当点击鼠标左键时触发。.right - (2.2.0) 只当点击鼠标右键时触发。.middle - (2.2.0) 只当点击鼠标中键时触发。.passive - (2.3.0) 以 { passive: true } 模式添加侦听器2.v-bind修饰符 1.v-bind.prop

该修饰符的作用是防止暴露标签自定义属性，美化HTML结构。

示例：

打开chrome Elements的properties属性面板查看该元素属性可以看到

没有添加prop的属性是直接暴露在外的。

2.v-bind.sync

父子通信最传统的方式是使用$emit在子组件中创建自定义事件，后在父组件中监听该事件：

//父元素<Sinput :myValue="myValue" @tt="tt"/>import Sinput from '_c/SInput'export default { name: 'attr', data () { return { myValue: 'aa' } }, methods: { tt (val) { this.myValue = val } }, components: { Sinput }}//子元素 <input @input="handleInput" :value="myValue" >export default { name: 'SInput', props: ['myValue'], methods: { handleInput (event) { const value = event.target.value this.$emit('tt', value) } }}

.sync修饰符其实就是个语法糖，相当于：

//父元素<div myValue.sync='myValue'></div>等同于//父元素 <Sinput :myValue="myValue" @update:myValue="(val)=> this.myValue=val" />//子元素<template> <input @input="handleInput" :value="myValue" ></template><script>export default { name: 'SInput', props: ['myValue'], methods: { handleInput (event) { const value = event.target.value this.$emit('update:myValue', value) } }}</script> 3.v-model修饰符 1.v-model.lazy

改变v-model的语法糖，原本监听input事件：

使用.lazy修饰符后监听change事件:

<input v-model.lazy="value"/>//等同于<input :value="value" @change="value=$event.target.value"/> 2.v-model.trim

用来过滤输入的前后空格

3.v-model.number

将字符串转化为数字，并且在失去焦点时将非数字删除

注意：在输入框开头输入非数字是无法将字符串转化为数字的，依旧会默认输出，所以不要将其当成input的Number类型运用，如下：