一：表单修饰符（v-model）
number 修饰符
number修饰符作用是尝试将输入的内容转化为Number类型。
作用
1：因为原生input 即使我们设置 type="number"此时获取到的数据类型依然是String类型，如果后端需要我们传递Number类型数据或者我们需要对数据进行判断，此时就可以使用此修饰符做转换及限制处理。
示例：
<input type="number" v-model="val1">
<input type="number" v-model.number="val2">
<el-button @click="getTypeOf">click</el-button>
打印结果：
注意点
1：对于type="text"同样适用，不过当val值开始为字符串时，number修饰符无效，只有当最初字符为数字时才可以。因为number修饰符实现的原理是根据parseFloat()对内容进行解析。当无法解析的时候就返回原始值，这也是为什么在最开始说它是尝试把输入内容转化为number的原因。
trim 修饰符
trim修饰符可以自动过滤掉用户输入值首尾空格。
示例：
<input v-model.trim="val">
注意点
1:trim修饰符只会过滤掉首尾空格，对中间空格无效。
lazy 修饰符
.lazy修饰符作用是使数据的同步从input事件改为change事件。
我们都知道，vue库帮我们做了数据同步，当我们触发input事件时，对应数据就会同步更新，加入lazy修饰符会把数据更新绑定在change事件上，即当input框失焦的时候，才会同步数据。
二：事件修饰符（v-on）
stop 修饰符
stop修饰符，用来阻止事件冒泡
prevent 修饰符
prevent修饰符，用来阻止默认事件
示例：
表单提交事件不会再重载页面
<form v-on:submit.prevent="onSubmit"></form>
capture 修饰符
添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。
self 修饰符
只当在 event.target 是当前元素自身时触发处理函数, 即事件不是从内部元素触发的
once 修饰符
事件只触发一次
.passive 修饰符(copy官方文档 (https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6 ))
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
passive 修饰符尤其能够提升移动端的性能。
注意:
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。比如，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
三：按键修饰符(操做键盘对于键同样可以出发对于事件)
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
点击按钮和enter键都能出发点击事件
<button @click.enter="login">登录</button>
四：系统修饰键
- .ctrl
- .alt
- .shift
- .meta
sync修饰符
初看官方文档有点蒙，觉得这个修饰符描述有点绕，敲个例子发现这个就是vue的一个语法糖。说白了就是父组件向子组件传参的时候，如果需要在子组件改变父组件值，可以省略传递触发子组件的回调函数。
来使用update:myPropName 的模式触发事件
<ChildCom :sendText.sync='text'/> 分解即等于==><ChildCom :sendText="text" @updata:sendText="val=>this.text = val"/>
具体例子：
//父组件:
<div class='container'>
{{text}}
<ChildCom :sendText.sync='text'/>
</div>
//子组件：
<div class='container'>
<button @click="$emit('update:sendText','点击后文字')">clickme</button>
</div>
所以说如果你采用通过父组件向子组件传递一个方法，然后在子组件中通过$emit触发此父组件方法也可以达到同样效果。
以上就是对vue修饰符的总结，如有错误，欢迎指正！
网友评论