vue中的修饰符

迷南。 2022-12-08 01:46 113阅读 0赞

### 一、事件修饰符 ###

--------------------

.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>
    
    
    
    <div v-on:click.self="doThat">...</div>
    
    
    <a v-on:click.once="doThis"></a>
    
    
    
    
    <div v-on:scroll.passive="onScroll">...</div>

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

## `以上为事件修饰符，面试常问的，还有以下其它类型修饰符为扩展加分项，不必须回答！！！！！！！！！！` ##

### 二、 v-model的修饰符 ###

--------------------

<1> .lazy  
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<2> .number  
自动将用户的输入值转化为数值类型

<3> .trim  
自动过滤用户输入的首尾空格

### 三、键盘事件的修饰符 ###

--------------------

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

对于一些常用键，还提供了按键别名：

全部的按键别名：

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

.ctrl  
.alt  
.shift  
.meta

<input @keyup.alt.67="clear">
    
    <div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<input @keyup.alt.67="clear">
     
    
    <input @keyup.alt="other">
    
    
    <input @keydown.ctrl.13="submit">

### 四、element的修饰符 (面试回答加分) ###

--------------------

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。