1. 事件修饰符
在事件处理函数中,我们可能需要经常处理诸如阻止默认事event.preventDefault()或阻止事件冒泡event.stopPropagation() 等事情, 虽然实现起来很轻松, 但是最好的方式就是方法只用来处理纯粹的数据逻辑, 而不是去处理了DOM事件细节
为了解决这个问题，Vue.js 为 v-on 事件绑定指令提供了事件修饰符。
1.1. 修饰符的理解
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
例如:
默认情况下当你点击submit按钮时,页面就会发生跳转, 当我们添加了修饰符.prevent, 就会阻止默认的跳转页面的行为
那接下来就让我们看看都有哪些事件修饰符吧
1.2. 事件修饰符
1.2.1. 阻止事件传播
使用修饰符.stop,阻止事件的传播
grandson
示例:
1.2.2. 将事件绑定在捕获阶段
默认的事件是绑定在冒泡阶段的,
但是我们通过修饰符将事件绑定在捕获阶段
使用修饰符.capture(捕获)
parent
示例:
如果将box的事件绑定在了捕获阶段,那么这里就会先执行box的事件在执行wrap的事件
阻止事件传播与事件捕获组合使用
parent
示例:
这里事件将永远无法传递到wrap事件上, wrap的事件函数将永远不能执行, 因为每次点击wrap触发的事件流到box 就被stop终止了
1.2.3.阻止默认事件
使用修饰符 .prevent
百度
1.2.4. 事件只触发一次
事件只会在第一次点击时触发,之后再点击将不再触发这个事件
使用修饰符 .once
child
1.2.5. 当事件发生在事件源身上的时候在触发
只用当事件发生在元素自己身上时才触发,
使用修饰符.self
child
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2. 表单修饰符
除了事件除了有修饰符, Vue还给其他的指令提供了一些修饰符帮我们很好的处理一些问题.
那么我们就先来看看表单修饰符
2.1 lazy修饰符
使用了这个修饰符将会从“input事件”变成change事件进行同步
说白了change就是当你表单失去焦点时或者手动的点击enter键时触发,
input就是内容一变马上触发
{{ message }}
2.2 number修饰符
首先要明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型
举个例子，如果用户输入300，data 中绑定的其实是'300'(string)，
添加 number 指令后可以得到 300(number)的绑定结果。
而如果用户输入的不是数字，这个指令并不会产生任何效果。
未使用number修饰符num1
使用number修饰符num2
通过示例我们发现, 同样是输入数字,未使用修饰符输入的表单得到的是字符串, 使用表单得到的是数字
注意:
如果你输入的不是数字而是字母, 就算你是用了表单number修饰符 也不会转为数字, 因为转不了,
2.3 trim 修饰符
可以用来过滤前后的空格
通过上面的例子我们能发现,其实表单修饰符主要作用就是在我们通过表单收集数据的时候,对数据进行先期处理, 过滤掉不需要的空格
3. 按键修饰符
键盘修饰符主要修饰的是键盘事件
.ctrl.alt.shift.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
通常按键修饰符也可以用键盘码来代替使用
示例:
键盘 Event
4. 案例: todo 例子
-
{{item}}