[TOC] # 修饰符 ## 一.v-model的修饰符 `v-model`是用于在表单表单元素上创建双向数据绑定的指令。在`<input>`和`<textarea>`上，默认通过监听元素的 input 事件来更新绑定的属性值。 ### .lazy .lazy：在改变后才会被触发，也就是说当`input`或`textarea`失去焦点时，它所绑定的值才会发生改变。 ``` <!-- 若不使用 .lazy 修饰符，则在输入的过程中，haha 的值时不断变化的 --> <input type="text" v-model.lazy="haha"> <p>输入的内容为：{{ haha }}</p> ``` ### .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> ``` ### .trim `.trim`：自动过滤字符串前后的空格 ``` <!-- html部分 --> <input type="text" v-model.trim="haha"> <p>输入的内容为：{{ haha }}</p> ``` ## 二. v-on的修饰符 ### .stop `.stop`：该修饰符将阻止事件向上冒泡。同理于调用`event.stopPropagation()`方法 ``` <!-- html部分 --> <div @click='clickDivFunc'> <button @click.stop='clickBtnFunc'>点我</button> <div> ``` ### .prevent `.prevent`：该修饰符会阻止当前事件的默认行为。同理于调用`event.preventDefault()`方法 ``` <!-- html部分 --> <form @submit.prevent='clickBtnFunc'></form> ``` ### .self `.self`：只有该元素本身能触发此事件，它的子元素无法触发它的事件；所以，当点击了它的子元素，按照冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是它，所以它的事件不会被触发；如下： ``` <!-- html部分 --> <!-- 点击按钮时是不会触发div上的事件 --> <div @click.self='clickDivFunc'> <button @click='clickBtnFunc'>点我</button> <div> ``` ### .once `.once`：该修饰符表示绑定的事件只会被触发一次 ``` <!-- html部分 --> <button @click.once='clickBtnFunc'>点我</button> ``` ### .nactive `.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 ***** >[danger]**注意** 如果使用了element-ui，想要监听input标签的键盘事件的触发，需要再添加`.nactive`进行修饰，否则会不起作用。 可能是因为element-ui封装了个div在input标签外面，把原来的事件隐藏了，所以如果不加**.native**的话，按键不会生效。 ``` <el-input @keyup.enter.native="KeyUpEnter"></el-input> KeyUpEnter() { console.log('按下了enter键'); }, ``` ***** **自定义按键修饰符** 通过`config.keyCodes`对象来自定义按键修饰符别名，如： `Vue.config.keyCodes.f1 = 112` ***** **附键盘码：**  ## 四.v-bing的修饰符 ### .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) ```