vue修饰符

vue修饰符

修饰符

修饰符可以分为：

• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符
• v-bind修饰符

表单修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

效果：

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

	<div id='other'>
	        <input v-model.trim='trim'>
	        <p ref='tr'>{{trim}}</p>
	        <button @click='getStr'>获取</button>
	</div>\

	      var other = new Vue({
	            el:'#other',
	            data:{
	                trim:''
	            },
	            methods:{
	                getStr(){
	                    console.log(this.$refs.tr.innerHTML)
	                }
	            }
	
	        })

效果：

事件修饰符

• stop 阻止事件继续传播
• prevent 阻止标签默认行为
• capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
• self 只当在 event.target 是当前元素自身时触发处理函数
• once 事件将只会触发一次
• passive 告诉浏览器你不想阻止事件的默认行为

	<!-- 阻止单击事件继续传播 -->
	<a v-on:click.stop="doThis"></a>
	
	<!-- 提交事件不再重载页面 -->
	<form v-on:submit.prevent="onSubmit"></form>
	
	<!-- 修饰符可以串联 -->
	<a v-on:click.stop.prevent="doThat"></a>
	
	<!-- 只有修饰符 -->
	<form v-on:submit.prevent></form>
	
	<!-- 添加事件监听器时使用事件捕获模式 -->
	<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
	<div v-on:click.capture="doThis">...</div>
	
	<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
	<!-- 即事件不是从内部元素触发的 -->
	<div v-on:click.self="doThat">...</div>
	
	<!-- 点击事件将只会触发一次 -->
	<a v-on:click.once="doThis"></a>
	
	<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
	<!-- 而不会等待 `onScroll` 完成  -->
	<!-- 这其中包含 `event.preventDefault()` 的情况 -->
	<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。
Vue 在以前允许为 v-on 在监听键盘事件时添加按键修饰符：

比如 f2 的按键码为 113，那么我们可以通过 @keyup.113="…" 来使用该按键修饰符

<!-- 只有在 `keyCode` 是 113 时调用 `vm.submit()` -->
<input v-on:keyup.113="submit">

其实，你还可以通过全局 config.keyCodes 对象，来实现：
自定义键盘修饰符别名

keyCodes
类型：{ [key: string]: number | Array }
用法：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">

//1. 通过`Vue.config.keyCodes.名称 = 按键值`来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
//2. 使用自定义的按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">

但是在官方文档中，已经明确提到：
keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持
所以，建议的是使用按键修饰符别名

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
常用的按键别名：

• enter 回车键
• tab tab 键
• delete 删除（或退格）键
• esc Esc 键
• space 空格键
• up ↑键
• down ↓键
• left ←键
• right →键

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• ctrl
• alt
• shift
• meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

注意：

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。 仅在按下相应按键时才触发鼠标或键盘事件的监听器，简单地说就是，配合其他按键才能使用

exact 修饰符

exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

<!--  Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>