vue修饰符简略总结[通俗易懂]

vue修饰符简略总结[通俗易懂]vue修饰符主要分为:1.表单修饰符;2.事件修饰符;3.按键修饰符,其中包含特殊修饰符:系统修饰键,.exact修饰符;4.鼠标按钮修饰符;5.其他修饰符,包含:.sync,.prop,.camel一、表单修饰符(用法一致为表单元素使用v-model时加修饰符:v-model.修饰符)1).trim:去除仅首尾的空格2).lazy…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

vue修饰符主要分为:

1.表单修饰符;

2.事件修饰符;

3.按键修饰符,其中包含特殊修饰符:

        系统修饰键,

        .exact修饰符;

4.鼠标按钮修饰符;

5.其他修饰符,包含:

        .sync,

        .prop,

        .camel

一、表单修饰符(用法一致为表单元素使用v-model时加修饰符:  v-model.修饰符)

        1) .trim: 去除仅首尾的空格

        2) .lazy: 不让表单外双向绑定的数据实时接收表单内数据并更新,而是blur(失焦)后更新

        3) .number: 如果你先输入数字,那它就会限制你输入的只能是数字;如果你先输入字符串则该修饰符失效

二、事件修饰符(特定的被修饰事件.修饰符)

        1) .stop: 阻止事件冒泡(相当于event.stopPropagation()方法)

        2) .prevent: 阻止默认行为(例如submit的提交行为,相当于event.preventDefault()方法)

        3) .self: 用self修饰符的元素不会受其他关联元素上的事件所影响(例如事件冒泡机制)

                注意: @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止对元素自身的点击。也就是从左往右判断

        4) .once: 使被修饰的事件仅触发一次

        5) .capture: 捕获.即 使被修饰事件改变默认的冒泡阶段触发,而是在捕获阶段触发

        6) .passive: 移动端用到的,防止监听元素滚动事件时网页卡顿(类似.lazy防止热更新), 大大减少事件触发,提升移动端性能

        7) .native: 针对原生事件在外来组件上无法生效的问题,可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签. 注意:使用.native修饰符来操作普通HTML标签是会令事件失效的

三、按键修饰符(键盘事件.修饰符)

        1) .keyCode: 让键盘事件在指定的keyCode值被触发时触发,至于keyCode值,可以监听键盘事件去methods上打印e.target查阅,也可查看ASCII码表

        2) 为了方便我们使用,vue给一些常用的键提供了别名

                普通键:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

                系统修饰键:

  • .ctrl
  • .alt
  • .shift
  • .meta

        3) .exact: 主要用来制作快捷键

四、其他修饰符

1) .sync:用法:

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

Jetbrains全家桶1年46,售后保障稳定

简化了父子传递事件时父组件的代码,当然方便之余 相应的也有一定限制:

  1. 使用sync的时候,子组件传递的事件名必须为update:value,其中value必须与子组件中props中声明的名称完全一致
  2. 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是,你只能提供你想要绑定的属性名,类似 v-model。
  3. 将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。

2) .prop: 用于纠正所绑定的值绑定到property,避免绑定到dom节点的attribute

<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined

3) .camel: 也是起到一个纠正作用,由于HTML特性不区分大小写

<svg :viewBox="viewBox"></svg>

实际渲染效果:

<svg viewbox="viewBox"></svg>

这将导致渲染失败,因为 SVG 标签只认 viewBox,却不知道 viewbox 是什么。
如果我们使用.camel修饰符,那它就会被渲染为驼峰名。
另,如果你使用字符串模版,则没有这些限制:

new Vue({
  template: '<svg :viewBox="viewBox"></svg>'
})

本篇大部分参考了https://segmentfault.com/a/1190000016786254 ,其中有详细解说和大量案例。此文仅供速查

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/227285.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【毕业季】这四年一路走来都很值得——老学长の忠告

    【毕业季】这四年一路走来都很值得——老学长の忠告大家好,我是路飞!又是一年毕业季,大学四年还没来得及好好体验校园生活,就匆忙收尾了!这四年时光里,有过目标和追求,也有过遗憾和不舍,从四年前刚踏入大学校门时满怀的憧憬和期待,到现在终于结束了自己长达十几年的学生身份,离开校园踏入社会。正式作为一个在互联网苟且偷生,为了生活和前途而努力的。…

  • Ubuntu 18.04换国内源 中科大源 阿里源 163源 清华源

    Ubuntu 18.04换国内源 中科大源 阿里源 163源 清华源国内有很多Ubuntu的镜像源,包括阿里的、网易的,还有很多教育网的源,比如:清华源、中科大源。我们这里以中科大的源为例讲解如何修改Ubuntu18.04里面默认的源。编辑/etc/apt/sources.list文件,在文件最前面添加以下条目(操作前请做好相应备份):##中科大源debhttps://mirrors.ustc.edu.cn/ubuntu/bionic…

  • WPF是什么_wpf documentviewer

    WPF是什么_wpf documentviewer项目中要用到一个数据分页栏,虽然自己没有实现过,但凭经验感觉它和ListBox/ListView有关。于是去网上搜了下WPF数据分页栏,果然很多实现都用到了ListView。于是拣了一种比较简单的实现学习,其中包含下面代码:ListView.View的标签内出现了GridView。在我印象中Grid是网格式的,而List是列表式的,所以我很好奇两者为什么可以混到一起。当然从类的关系上来看,应该是两者都继承了一个共同的父类。那么为了能使用起来更“自如”,对GridView有个系统的了解,还是有必要学习一

  • Web安全之业务逻辑漏洞

    Web安全之业务逻辑漏洞业务逻辑不同的项目有不同的功能,不同的功能需要不同的代码实现,实现这些核心功能的代码就叫业务逻辑。业务逻辑漏洞业务逻辑漏洞是指由于程序逻辑不严谨或逻辑太复杂,导致一些逻辑分支不能正常处理或处理错误。常见的业务逻辑漏洞业务逻辑漏洞挖掘过程确定业务流程—>寻找流程中可以被操控的环节—>分析可被操控环节中可能产生的逻辑问题—>尝试修改参数触发逻辑问题业务逻辑漏洞1.URL跳转漏洞1.1.URL跳转概述1.2.触发方式及绕或技巧1.3.修复方法2.短信邮箱轰炸漏洞2.1.短信邮.

  • 度量学习方法总结

    度量学习方法总结目录一.距离度量闵可夫斯基距离欧式距离(EuclideanDistance):标准化欧氏距离(StandardizedEuclideandistance)曼哈顿距离(ManhattanDistance)切比雪夫距离(Chebyshevdistance)马氏距离马氏距离代码示例:夹角余弦相关系数(Correlationcoefficient)…

  • session.setAttribute()方法

    session.setAttribute()方法session.setAttribute(“sessionName”,Object);用来设置session值的,sessionName是名称,object是你要保存的对象。session.getAttribute(“sessionName”);用来得到对应名称的session值,即得到object对象,注意需要进行类型转换!session.setAttribute(“xyyyy”,xyyy);保存session.getAttribute(“xyyyy”);取得你可以把自己要的数据什么的放在se

    2022年10月17日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号