标签：触发 自定义 代码 修饰符 键盘 复制 冒泡 div

事件修饰符

.stop:阻止事件冒泡，相当于调用了 event.stopPropagation()方法

<button @click.stop="test"></button>
复制代码

.prevent: 阻止默认行为，相当于调用了 event.preventDefault()方法，比如表单的提交、 a 标签的跳转就是默认事件

<a href="" @click.prevent="test"></a>
复制代码

.self: 只有点击元素本身才会触发。比如一个 div里面有个按钮， div 和按钮都有事件，我们点击按钮， div 绑定的方法也会触发，如果 div的 click 加上 self，只有点击到 div 的时候才会触发，变相的算是阻止冒泡。

<button @click.self="test">...</button>
复制代码

.once: 事件只能触发一次，无论点击多少次，执行第一次之后就不执行了

<button @click.once="test"></button>
复制代码

.captrue: 捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

<div id="obj1" @click="doc">
    <div id="obj2" @click.capture="doc">
          <div id="obj3" @click.capture="doc">
              <div id="obj4" @click="doc">
                <!-- 点击obj4的时候，弹出的顺序为：obj2、obj3、obj4、obj1；因为2有.captrue修饰符，故而先触发事件，由外到内，然后就是4本身触发，最后冒泡事件。-->
            </div>
          </div>
     </div>
</div>
复制代码

v-model 修饰符

.lazy: 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，让光标离开input框数据再同步

<input type="text" v-model.lazy="value">
复制代码

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

<input v-model.number="value">
复制代码

.trim: 过滤输入框首尾的空格

<input type="text" v-model.trim="value">
复制代码

键盘修饰符

Vue 提供了绝大多数常用的按键码的别名

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

自定义键盘修饰符

<input type="text" placeholder="按下F5" @keyup.f5="handle" />
复制代码

顺便推荐下我的小说网站，欢迎收藏哟

虫鱼小说网

知秋小说网 

标签：触发,自定义,代码,修饰符,键盘,复制,冒泡,div
来源： https://blog.csdn.net/allen_he_123/article/details/119420046

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。