【vue2第三章】指令修饰符

ゝ一纸荒年。 2023-10-15 10:34 7阅读 0赞

#### 指令修饰符 ####

Vue.js 的指令修饰符是在指令后面使用的特殊标记，用于改变指令的行为或者提供额外的功能。以下是一些常用的 Vue 指令修饰符：

*  `.prevent`：阻止默认事件的触发，相当于调用 `event.preventDefault()`。
 *  `.stop`：阻止事件冒泡，相当于调用 `event.stopPropagation()`。
 *  `.capture`：使用事件捕获模式，即从外部元素开始触发事件，然后再触发内部元素的事件。
 *  `.self`：只有当事件在绑定的元素本身触发时才触发事件，不会触发内部元素的事件。
 *  `.once`：指令只会触发一次，然后自动解绑。
 *  `.passive`：指示监听器永远不会调用 `event.preventDefault()`，可以提高性能。
 *  `.native`：监听组件根元素的原生事件，而不是组件内部的子元素上的事件。
 *  `.sync`：双向绑定，可以在子组件中修改父组件的数据而不需要通过`$emit`。
 *  `.lazy`：将 `input` 事件改为 `change` 事件，减少输入事件的频率。
 *  `.trim`：自动去除输入内容的首尾空格。
 *  `.number`：将输入的 value 值转为数字类型。

1.  **按键修饰符。**  
    @keyup.enter -----》 键盘回车监听  
    在需要的input框上添加案件修饰符，就比如百度搜索的时候，回车会触发搜索跳转一样的效果。  
    就比如一下的例子 ,我为每个input框新增了 @keyup.enter="fun(”enter触发“)" 就会调用methods中的fun方法并且传参输出，就可以清楚的看见是鼠标点击还是键盘触发。![0ed7d3a43e9244129354faf456c66263.png][]
2.  **v-model修饰符**  
    v-model.trim -----》去除首尾空格  
    v-model.number ---》 转数字  
      
    其中v-model.trim会自动将修饰的input框里面输入内容的左右两边的空格去除。  
    v-model.number会把数字字符串改变为数字。  
      
    ![f9edfc73c771406283bb85717b43a19f.png][]
3.  **事件修饰符**  
    @事件名.stop ----》阻止事件冒泡  
    @事件名.prevent ---》阻止默认行为

@click.stop会阻止点击事件的冒泡行为。(冒泡行为：点击子元素，触发子元素方法，在依次触发父元素的点击事件)  
@事件名.prevent,就会阻止a标签的默认点击事件。如下:

<a @click.prevent  href="https://www.baidu.com">baidu</a>

[0ed7d3a43e9244129354faf456c66263.png]: https://img-blog.csdnimg.cn/0ed7d3a43e9244129354faf456c66263.png
[f9edfc73c771406283bb85717b43a19f.png]: https://img-blog.csdnimg.cn/f9edfc73c771406283bb85717b43a19f.png