vue修饰符总结及积累

在vue中v-model、v-on除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现，通过在指令后面用小数点 .连接修饰符名称来调用修饰符，下面是对vue中的修饰符的总结及积累：

一、v-model的修饰符

v-model是用于在表单表单元素上创建双向数据绑定的指令。在 <input>和 <textarea>上，默认通过监听元素的 input 事件来更新绑定的属性值。
1、.lazy 修饰符
.lazy：在改变后才触发，也就是说当input或者textarea失去焦点时，它所绑定的值才会改变，如：

<!-- html部分 -->
<!-- 若不使用 .lazy 修饰符，则在输入的过程中，haha 的值时不断变化的 -->
<input type="text" v-model.lazy="haha">
<p>输入的内容为：{{ haha }}</p>

2、.number 修饰符
.number：用来将输入的内容转换成数值，但如果输入的是字符串，则输出的也是字符串；
用于type='text'：

 <!-- html部分 -->
<input type="text" v-model.number="haha">
<p>输入的内容为：{{ haha }}</p>
<!-- 
  输出的值及为input失去焦点后的value值，即haha的值与input中显示的值最终会保持一致
  有下面几种情况：
  	1. 输入：123ebca154	输出：123		number类型
  	2. 输入：+123456		输出：123456		number类型
  	3. 输入：12e			输出：12			number类型
  	4. 输入：12.36e		输出：12.36		number类型
  	5. 输入：12.3.4.5		输出：12.3		number类型
  	6. 输入：-+1231abc	输出：-+1231abc	string类型
  	7. 输入：abc			输出：abc		string类型
  	8. 输入：+			输出：+			string类型
  	9. 输入：-			输出：-			string类型
-->

用于type='number'：

  <!-- html部分 -->
<input type="number" v-model.number="haha">
<p>输入的内容为：{{ haha }}</p>
<!-- 
   输出的值及为input的value值，当非法输入时，input最终展示的内容为输入的内容
   有下面几种情况：
   	1. 输入：-.35		输出：-0.35		number类型
   	2. 输入：+-123e	不输出		非法输入，string类型
   	3. 输入：12e		不输出		非法输入，string类型
   	4.输入：+-..25		不输出		非法输入，string类型
-->

无论是用在text中还是用在number中，都需要再进行处理：
用在text中：

<script>
 // 对haha监听，如下：
watch: {
   haha (newVal, oldVal) {
   	this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal
   }
}
</script>

用在number中：

<script>
// 给input绑定blur事件
methods: {
  inputBlurFunc (newVal, oldVal) {
  	this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal
  }
}
</script>

3、.trim 修饰符
.trim：自动过滤字符串前后的空格

<!-- html部分 -->
<input type="text" v-model.trim="haha">
<p>输入的内容为：{{ haha }}</p>

二、v-on的修饰符

1、.stop 修饰符
.stop：该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation()方法

 <!-- html部分 -->
 <div @click='clickDivFunc'>
	<button @click.stop='clickBtnFunc'>点我</button>
 <div>

2、.prevent 修饰符
.prevent：该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault()方法

<!-- html部分 -->
<form @submit.prevent='clickBtnFunc'></form>

3、.self 修饰符
.self：只有该元素本身能触发此事件，它的子元素无法触发它的事件；所以，当点击了它的子元素，按照冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是它，所以它的事件不会被触发；如下：

<!-- html部分 -->
<!-- 点击按钮时是不会触发div上的事件 -->
<div @click.self='clickDivFunc'>
   <button @click='clickBtnFunc'>点我</button>
<div>

4、.once 修饰符
.once：该修饰符表示绑定的事件只会被触发一次

<!-- html部分 -->
<button @click.once='clickBtnFunc'>点我</button>

5、.native 修饰符
.native：给某个组件的根元素上添加事件，需要添加该修饰符来使事件有效；使用在普通根元素上，改修饰符是无效的；如下：

<my-component v-on:click.native="clickFun"></my-component>

修饰符可以串联，如：
<a v-on:click.stop.prevent="hahaFunc"></a>

三、按键修饰符

Vue 允许为 v-on 在绑定键盘事件时添加按键修饰符，通过 keyup.keyCode的方式来监听键盘特定按键的事件。也可以通过按键名称来监听，如下：

<!-- 通过keyCode的方式监听 -->
<input type='text' @keyup.13='submitFunc'>
<!-- 通过按键名称的方式监听 -->
<input  type='text' @keyup.enter="submit">

所有的按键别名：

• enter
• tab
• delete (捕获 “删除” 和 “退格” 键)
• esc
• space
• up
• down
• left
• right

自定义按键修饰符
通过config.keyCodes对象来自定义按键修饰符别名，如：
Vue.config.keyCodes.f1 = 112

四、v-bing的修饰符

1、.sync 修饰符
.sync：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定，即在子组件中修改父组件的属性值；该修饰符会被扩展为一个自动更新父组件属性的v-on监听器，如下：

<comp :foo.sync="bar"></comp>

扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新foo的值时，它需要显式的触发更新事件，如下：

this.emit('update:foo', newValue)