vue修饰符——可能是东半球最详细的文档了（滑稽）

时间：2023-04-05 13:38:06 HTML5

为了方便大家写代码，vue.js为大家提供了很多方便的修饰符，比如我们常用的取消冒泡，防止默认事件等等~李雷博客插个广告目录表单修饰符事件修饰符鼠标键修饰符键值修饰符v-bind修饰符（真不知道叫什么）表单修饰符填表，最常用的是什么？输入！v-model~而我们的修饰符的存在就是为了简化这些事情。lazy

从这里开始我们可以看到，当我们还在打字，光标还在的时候，后面的值就已经出来了，可以说是非常实时了。但有时我们希望在输入所有内容后光标离开时更新视图。

这样就够了~这只是当我们的光标离开输入框的时候，它会更新视图，相当于在onchange事件中触发更新。.trim在我们的输入框中，经常需要过滤一些兄弟输入密码后不小心输入空格的内容。为了让你看的更清楚，我改了样式，不过问题不大，相信你已经看清楚了，没有left和这个大helloSpace的右侧，即使你在输入框中砸了空格键。需要注意的是，它只能过滤前导和尾随的空格！第一个和最后一个，中间的不会被过滤。number看名字就知道应该是限制数字的输入或者将输入转换成数字，不过不至于太火急单。如果您先输入数字，它将限制您只能输入数字。如果先输入字符串，就相当于不加.number事件修饰符。stop由于事件冒泡机制，当我们给元素绑定点击事件时，父级的点击事件也会被触发。ok

//jsshout(e){console.log(e)}//1//2一键停止事件冒泡，太方便了。相当于调用了event.stopPropagation()方法。ok

//只输出1.prevent用于防止默认行为该事件，例如，防止在单击提交按钮时提交表单。相当于调用了event.preventDefault()方法。

注意：可以同时使用多个修饰符，但顺序可能会有所不同不同的。使用v-on:click.prevent.self将阻止所有点击，而v-on:click.self.prevent只会阻止对元素本身的点击。即从左往右判断~.self只有在事件绑定的元素自身触发事件时才会触发回调。如下图，刚才我们从.stop得知，子元素会冒泡到父元素，触发父元素的点击事件。当我们添加这个.self的时候，我们点击按钮，不会触发父元素的点击事件呼喊。只有当你点击父元素（蓝色背景）的时候才会喊~从thisself的英文翻译是'self,itself'可以看出这个修饰符的用法ok

.once这个修饰符就像名字一样简单粗暴，只能使用一次，就是bound事件以后只能触发一次，不会触发第二次。//按键盘坏只能喊一次ok.capture从上面我们知道事件的冒泡。其实完整的事件机制是：捕获阶段——目标阶段——冒泡阶段。默认情况下，事件触发器是从目标冒泡。当我们添加这个.capture时，我们做相反的事情，从包含这个元素的最上层到最下层触发事件。obj1obj2obj3obj4