码农知识堂 - 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右键
  • 相关阅读:
    骑行上下坡,如何分配重心?让你的骑行更稳定、更安全
    Android 5.1 open data flow 数据开启流程
    高校宿舍系统
    【LeetCode刷题篇零】一些基础算法知识和前置技能(下)
    pycharm操作git、前后端项目上传到gitee
    C++函数模板和类模板(基础+进阶)
    手把手教你彻底卸载MySQL
    3Dexcite deltgen 2022x 新功能
    Spark学习(2)-Spark环境搭建-Local
    Oceanbase体验之(二)Oceanbase集群的搭建(社区版4.2.2)
  • 原文地址:https://blog.csdn.net/weixin_44337386/article/details/125434867
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号