-
目录 -
表单修饰符 -
事件修饰符 -
鼠标按键修饰符 -
键值修饰符
v-bind修饰符（实在不知道叫啥名字）
一、v-model修饰符 / 表单修饰符
v-model input最常用的双向绑定指令，实现了输入输出的实时绑定显示
<div>
<input type="text" v-model="value">
<p>{{value}}</p>
</div>
1、.lazy 光标离开更新
输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据,相当于在onchange事件触发更新。
<div>
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
2、.trim 过滤首尾的空格
输入框过滤首尾的空格，中间的是不会过滤的
<input type="text" v-model.trim="value">
3、.number
如果你先输入数字，那它就会限制你输入的只能是数字。 如果你先输入字符串，那它就相当于没有加.number 而不是单一的限制输入数字或者输入的东西转换成数字
<input type="text" v-model.number="value" />
二、事件修饰符
1、.stop 阻止事件冒泡
由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件; 一键阻止事件冒泡，相当于调用了event.stopPropagation()方法。
<div @click="shout(2)">
<button @click="shout(1)">ok</button>
</div>
shout(e){
console.log(e)
}
2、.prevent：
阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- a标签的跳转 -->
<a @click.prevent="test">test</a>
注意：修饰符可以同时使用多个,但是可能会因为顺序而有所不同。
用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
也就是从左往右判断~
3、.self 点击元素本身触发
只有元素本身触发时才触发方法，点击元素本身才会触发：
注意：只当事件是从事件绑定的元素本身触发时才触发回调。像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景）才会shout~从这个self的英文翻译过来就是‘自己，本身’可以看出这个修饰符的用法
<div class="blue" @click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
4、.once：
事件只能用一次，无论点击几次，执行一次之后都不会再执行：
<button @click.once="shout(1)">ok</button>
5、.capture 向下捕获方式触发
完整的事件机制是：捕获阶段–目标阶段–冒泡阶段。
默认的呢，是事件触发是从目标开始往上冒泡。 当加了这个.capture以后呢，就反过来了，事件触发从包含这个元素的顶层开始往下触发。
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~
6、.passive 滚动事件延迟
当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
7、.native 转化为原生事件
我们经常会写很多的小组件，有些小组件可能会绑定一些事件，但是，像下面这样绑定事件是不会触发的
<My-component @click=“shout(3)”>
必须使用.native来修饰这个click事件（即可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签)
注意：使用.native修饰符来操作普通HTML标签是会令事件失效的
三、鼠标按钮修饰符
刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符
.left 左键点击
.right 右键点击
.middle 中键点击
<button @click.right="shout(1)">ok</button>
四、键值修饰符
其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的，比如onkeyup，onkeydown等
.keyCode
如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表https://zhidao.baidu.com/question/266291349.html
<input type=“text” @keyup.keyCode=“shout(4)”>
为了方便使用，vue给一些常用的键提供了别名
普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
系统修饰键
.ctrl
.alt
.meta
.shift
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
我们从上面看到，键分成了普通常用的键和系统修饰键，区别是什么呢？
当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。
<input type=“text” @keyup.ctrl=“shout(4)”>
那该如何呢？我们需要将系统修饰键和其他键码链接起来使用，比如
<input type=“text” @keyup.ctrl.67=“shout(4)”>
这样当我们同时按下ctrl+c时，就会触发keyup事件。
另，如果是鼠标事件，那就可以单独使用系统修饰符。
<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>
即：不能单手指使用系统修饰键的修饰符（最少两个手指，可以多个）。你可以一个手指按住系统修饰键一个手指按住另外一个键来实现键盘事件。也可以用一个手指按住系统修饰键，另一只手按住鼠标来实现鼠标事件。
.exact
我们上面说了这个系统修饰键，当我们像这样绑定了click键按下的事件，惊奇的是，我们同时按下几个系统修饰键，比如ctrl shift点击，也能触发，可能有些场景我们只需要或者只能按一个系统修饰键来触发（像制作一些快捷键的时候），而当我们按下ctrl和其他键的时候则无法触发。那就这样写。
注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。
<button type=“text” @click.ctrl.exact=“shout(4)”>ok
然后下面这个你可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发。相信你已经能听懂了8~
<input type=“text” @keydown.enter.exact=“shout(‘我被触发了’)”>
|