码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【前端面试必知】Vue常用的修饰符


    前言

    本系列主要整理前端面试中需要掌握的知识点。本节介绍怎么缓存当前组件。

    文章目录

    • 前言
    • 一、Vue的修饰符是什么
    • 二、修饰符的作用
      • 1、表单修饰符
      • 2、事件修饰符
      • 3、鼠标按钮修饰符
      • 4、键盘修饰符
      • 5、v-bind修饰符
    • 三、常用的应用场景


    一、Vue的修饰符是什么

    Vue中的修饰符分为以下五种:

    • 表单修饰符;
    • 事件修饰符;
    • 鼠标按键修饰符;
    • 键值修饰符;
    • v-bind修饰符。

    二、修饰符的作用

    1、表单修饰符

    修饰符作用使用
    lazy填完信息,光标离开标签的时候,才会将值赋予给value<input type="text" v-model.lazy="value">
    trim自动过滤用户输入的首空格字符,中间的空格不会过滤<input type="text" v-model.trim="value">
    number自动将用户输入的值转为数值类型,如果不能被parseFloat解析,会返回原来的值<input v-model.number="age" type="number">

    2、事件修饰符

    修饰符作用使用
    stop阻止了事件冒泡 ,相当于调用了event.stopPropagation<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>//只输出1
    prevent阻止了事件的默认行为,相当于调用了event.preventDefault方法<form v-on:submit.prevent="onSubmit"></form>
    once绑定了事件以后只能触发一次,第二次就不会触发<button @click.once="shout(1)">ok</button>

    3、鼠标按钮修饰符

    left左键点击、right右键点击、middle中键点击

    <button @click.left="shout(1)">ok</button>
    <button @click.right="shout(1)">ok</button>
    <button @click.middle="shout(1)">ok</button>
    
    • 1
    • 2
    • 3

    4、键盘修饰符

    键盘修饰符用来修饰键盘事件(onkeyup,onkeydown)的,有如下:

    • 普通键(enter、tab、delete、space、esc、up…)
    • 系统修饰键(ctrl、alt、meta、shift)
    // 只有按键为keyCode的时候才触发
    <input type="text" @keyup.keyCode="shout()">
    
    • 1
    • 2
    • 还可以通过以下方式自定义一些全局的键盘码别名
    Vue.config.keyCodes.f2 = 113
    
    • 1

    5、v-bind修饰符

    props设置自定义标签属性,避免暴露数据,防止污染HTML结构

    <input id="uid" title="title1" value="1" :index.prop="index">
    
    • 1

    三、常用的应用场景

    修饰符应用场景
    .stop阻止事件冒泡
    .native绑定原生事件
    .once事件只执行一次
    .self将事件绑定在自身身上,相当于阻止事件冒泡
    .prevent阻止默认事件
    .caption用于事件捕获
    .once触发一次
    .keyCode监听特定键盘按下
    .right右键
  • 相关阅读:
    RK3588平台开发系列讲解(CAN篇)CAN FD 开发文档
    lv5 嵌入式开发-5 线程的创建和参数传递
    IntelliJ IDEA 开发Vue项目 ElementUI 未知HTML标记 提示问题的解决
    什么是异常处理,Python常见异常类型
    【编程题】【Scratch二级】2019.09 绘制雪花图案
    2.js获取单选按钮(radio)的value值和点击事件
    String
    2023.09.30使用golang1.18编译Hel10-Web/Databasetools的windows版
    介绍rabbitMQ
    有不用出门就能做的副业吗?
  • 原文地址:https://blog.csdn.net/weixin_44337386/article/details/125434867
  • 最新文章
  • 沪漂五周年了:我越来越迷茫了
    Agentic Skill Routing 实战:别再把所有 Skill 塞进 AI Agent 上下文
    MySQL-Seconds_behind_master的精度误差
    [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
    AI的至暗历史:从万众期待到被政府撤资,AI的两次死亡徘徊
    Agent OS :五种驯服不确定性的范式
    PortSwigger SQL注入LAB11
    数据库即时编译JIT
    [Begin]AI Learn Data Day 0
    深度学习进阶(二十七)现代 LLM 的核心架构设计其二:SwiGLU
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号