Vue修饰符

事件修饰符

在Vue 2.0中，事件修饰符允许我们在处理事件时对其进行修改或增强。以下是一些常用的事件修饰符：

  1. .stop：阻止事件冒泡。使用此修饰符后，父元素的相同事件不会再触发。
  2. .prevent：阻止事件的默认行为。比如，提交表单时可以使用.prevent修饰符阻止页面的刷新。
  3. .capture：使用事件捕获模式，即在父元素上触发事件处理程序，然后才在子元素上触发。默认情况下，事件是在冒泡阶段处理的。
  4. .self：只有当事件是从元素自身触发时才触发事件处理程序。如果事件是从子元素冒泡上来的，那么事件处理程序不会被触发。
  5. .once：只触发一次事件处理程序。即使事件被多次触发，只有第一次触发时会执行相应的处理程序。
  6. .passive：指定事件处理程序不会调用preventDefault()方法。这可以提升滚动性能。

.stop 阻止事件冒泡

<template><div><div @click="showInfo" style="height: 50px;background: yellowgreen;"><button @click.stop="showInfo">点我提示信息</button></div></div>
</template>
<script>
export default {methods: {showInfo(e) {// e.stopPropagation();alert(".prevent 修饰符")}}
};
</script>

.prevent 阻止事件的默认行为

<template><div>// 阻止了表单提交时的默认行为<form @submit.prevent="handleSubmit"><input type="text" /><button type="submit">Submit</button></form>// 阻止了a标签的默认行为<a href="www.baidu.com" @click.prevent="showInfo">点我提示信息</a></div>
</template>
<script>
export default {methods: {handleSubmit() {console.log('.prevent 修饰符')},showInfo(e) {// e.preventDefault();alert(".prevent 修饰符")}}
};
</script>

.capture 事件捕获模式

<template><div><div style="background: red;padding: 5px;" @click.capture="showMsg(1)">div1<div style="background: yellow;padding: 5px;" @click="showMsg(2)">div2</div></div></div>
</template>
<script>
export default {methods: {showMsg(msg) {console.log(msg)}}
};
</script>

.once 只触发一次事件处理程序

<template><div><button @click.once="showInfo">点我提示信息</button></div>
</template>
<script>
export default {methods: {showInfo() {alert(".prevent 修饰符")}}
};
</script>

.self 只有当事件是从元素自身触发时才触发事件

<template><div><div @click.self="showInfo" style="height: 50px;background: yellowgreen;"><button @click="showInfo">点我提示信息</button></div></div>
</template>
<script>
export default {methods: {showInfo(e) {// e.stopPropagation();alert(".prevent 修饰符")}}
};
</script>

.passive 事件的默认行为立即执行，无需等待事件回调执行完成

<template><div><ul @scroll="headelScroll" @wheel.passive="headelWhell" style="height: 100px; overflow: auto;background: bisque;color:#fff"><li style="height: 50px;background: rebeccapurple;">1</li><li style="height: 50px;background: blue;">2</li><li style="height: 50px;background: rebeccapurple;">3</li><li style="height: 50px;background: blue;">4</li></ul></div>
</template>
<script>
export default {methods: {headelScroll() {console.log("@");},// 滚轮事件headelWhell() {for (let i = 0; i <100000; i++) {console.log('++');}console.log("@@");}}
};
</script>

.native 就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加 native事件是无法触发的。

<my-component v-on:click.native="doSomething"></my-component>

键盘修饰符

在Vue 2.0中，你可以使用键盘修饰符来更方便地处理键盘事件。键盘修饰符是在处理键盘事件时使用的一种特殊语法，在按下特定键时执行相应的操作。

Vue 2.0中支持的键盘修饰符有以下几种：

普通

  • .enter：按下Enter键。
  • .tab：按下Tab键。
  • .delete 或 .backspace：按下Delete或Backspace键。
  • .esc：按下Escape键。
  • .space：按下Space键。
  • .up：按下上箭头键。
  • .down：按下下箭头键。
  • .left：按下左箭头键。
  • .right：按下右箭头键。

系统修饰键

  • .ctrl：按下Ctrl键。
  • .alt：按下Alt键。
  • .shift：按下Shift键。
  • .meta：按下Meta键（通常是Command键或Windows键）。

还可以通过以下方式自定义一些全局的键盘码别名：

<!-- HTML -->
<div id="app"><input type="text" v-on:keydown.f5="prompt()">
</div>Vue.config.keyCodes.f5 = 116;
let app = new Vue({el: '#app',methods: {prompt: function() {alert('我是 F5！');}}
});

你可以通过在Vue模板中使用这些修饰符来监听相应的键盘事件。以下是一个示例：

<template><div><input v-on:keydown.enter="handleEnter" /><input v-on:keydown.tab="handleTab" /><input v-on:keydown.delete="handleDelete" /><input v-on:keydown.esc="handleEscape" /><input v-on:keydown.space="handleSpace" /><input v-on:keydown.up="handleUp" /><input v-on:keydown.down="handleDown" /><input v-on:keydown.left="handleLeft" /><input v-on:keydown.right="handleRight" /><input v-on:keydown.ctrl="handleCtrl" /><input v-on:keydown.alt="handleAlt" /><input v-on:keydown.shift="handleShift" /><input v-on:keydown.meta="handleMeta" /><input v-on:keydown="handleAll" /><!-- 其它 --><input v-on:keydown.caps-lock="handleAll" /></div>
</template><script>
export default {methods: {handleEnter() {// 按下Enter键的处理逻辑},handleTab() {// 按下Tab键的处理逻辑},// 其他键盘事件处理函数...handleAll () {console.log(e.key, e.keyCode); // CapsLock 20}}
}
</script>

在上面的示例中，我们分别在不同的input元素上使用了不同的键盘修饰符，并绑定了相应的事件处理函数。当用户在输入框中按下对应的键时，对应的事件处理函数会被调用。

希望这能帮助到你！如果你有任何进一步的问题，请随时问我。

鼠标修饰符

针对的就是左键、右键、中键点击，对应的鼠标键点击才会触发函数

left 左键点击
right 右键点击
middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

表单修饰符

在Vue.js 2.0中，表单修饰符是一种用于修改表单输入行为的特殊指令。它们是通过在指令后面添加一个句点(“.”)和修饰符来使用的。

下面是一些常用的表单修饰符：

  • .lazy：默认情况下，Vue会在每次输入事件触发时同步更新输入框的值。使用.lazy修饰符可以改为在change事件触发时进行同步更新。

  • .number：将用户的输入值转为数字类型。如果输入的值无法转为有效的数字，则会返回原始的字符串。

  • .trim：自动过滤用户输入的首尾空白字符。

  • .native：监听组件根元素的原生事件，而不是组件内部通过$emit触发的自定义事件。

使用示例：

<input type="text" v-model.lazy="message"> <!-- 在change事件触发时更新message值 -->
<input type="text" v-model.number="age"> <!-- 将用户输入的值转为数字 -->
<input type="text" v-model.trim="username"> <!-- 自动去除输入内容的首尾空白字符 -->

以上是一些常用的Vue.js 2.0表单修饰符，它们可以帮助我们更好地处理表单输入。

v-bind修饰符

在Vue.js 2.0中，v-bind 是用来绑定一个或多个属性的指令。它可以接受修饰符，用于修改绑定的行为。下面是一些常用的 v-bind 修饰符：

  • .prop：将属性绑定到组件的属性，而不是绑定到DOM元素的特性。这在使用自定义组件时非常有用。

  • .camel：将属性名转换为驼峰式命名。例如，v-bind:my-prop.camel 将会绑定到组件的 myProp 属性，而不是 my-prop 属性。

  • .sync：实现双向绑定。当绑定的值发生变化时，会将变化同步回父组件。注意，在实际使用中，需要在父组件中使用 .sync 修饰符来更新变量。

  • .modifiers：用于传递修饰符的参数。例如，.number、.trim 修饰符可以使用 v-bind:my-prop.number.trim。

使用示例：

<custom-component v-bind:prop-name.prop="value"></custom-component> <!-- 将属性绑定到组件的属性 -->
<my-input v-bind:input-value.camel="myValue"></my-input> <!-- 将属性名转换为驼峰式命名 -->
<my-component v-bind:my-prop.sync="parentData"></my-component> <!-- 实现双向绑定 -->
<input v-bind:value.trim="inputValue"> <!-- 过滤输入值的首尾空白字符 -->

注意，在Vue 2.0中，v-bind 通常可以用简写的冒号语法来代替，例如 :prop-name.prop="value" 等同于 v-bind:prop-name.prop="value"。

以上是一些常用的Vue.js 2.0 v-bind 修饰符，它们可以帮助我们更好地控制属性绑定的行为。

.sync

作用：sync修饰符是一个语法糖，类似v-model，它主要是解决了父子组件的双向绑定问题。因为vue提倡的是单向数据流动，因此不能直接在子组件里面修改父组件传过来的数据，我们一般$emit。

sync修饰符其实是做了两步动作：
1、声明传的数据visible
2、声明@update:visible事件

注意：

使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

原始写法$emit：

<!-- 父组件 -->
<template><div id="app"><button @click="visible=true">显示</button><my-alert :visible="visible" @close="closeAlert"></my-alert></div>
</template>
<script>
import myalert from './components/myalert'
export default {components:{'my-alert': myalert},data(){return {visible:false}},methods:{closeAlert(value){this.visible = value}}}
</script>

<!-- 子组件 -->
<template><div class="cont" v-show="visible"><h2>这是一个对话框</h2><button @click="closeAlert">关闭</button></div>
</template><script>export default {name: "myalert",props:{visible:{type:Boolean,default:false}},methods:{closeAlert(){this.$emit('close',false)}}}
</script>

一个数据就要带一个自定义事件才能实现双向绑定，为了避免乱起名引起的混乱，事件名我们最好约定一下规则。
因为是修改visible这个数据，因此事件我们统一就叫@update:visible

<!-- 父组件 -->
<template><div id="app"><button @click="visible=true">点击</button><my-alert :visible="visible" @update:visible="value => visible=value"></my-alert></div>
</template><script>
import myalert from './components/myalert'
export default {name: 'App',components:{'my-alert': myalert},data(){return {visible:false}}}
</script><!-- 子组件 -->
<template><div class="cont" v-show="visible"><h2>这是一个对话框</h2><button @click="closeAlert">关闭</button></div>
</template><script>export default {name: "myalert",props:{visible:{type:Boolean,default:false}},methods:{closeAlert(){this.$emit('update:visible',false)}}}
</script>

这么写还是太麻烦了，但有了统一的规则，系统就可以帮我们自动生成不必要的代码，这就是sync修饰符的作用，它让写法更为简洁：

<!-- 父组件 -->
<template><div id="app"><button @click="visible=true">点击</button><my-alert :visible.sync="visible"></my-alert></div>
</template><script>
import myalert from './components/myalert'
export default {name: 'App',components:{'my-alert': myalert},data(){return {visible:false}},}
</script>

<!-- 子组件 -->
<template><div class="cont" v-show="visible"><h2>这是一个对话框</h2><button @click="closeAlert">关闭</button></div>
</template><script>export default {name: "myalert",props:{visible:{type:Boolean,default:false}},methods:{closeAlert(){this.$emit('update:visible',false)}}}
</script>

.prop

prop:设置自定义标签属性，编译后不会出现在html中，避免暴露数据，防止污染HTML结构

<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined

.camel

camel:将命名变为驼峰命名法，只有props和.prop会默认将kebab-case转化为camelCase，剩下的作为attribute的不会。而.camel修饰符正是针对attribute的。如将view-Box属性名转换为 viewBox。

data() {return {msgText: 'aaa'}
}<h2 :msg-text="msgText">原本</h2>
<!-- 编译后为<h2 msg-text="aaa">原本</h2> --><h2 :msg-text.camel="msgText">加camel修饰符</h2>
<!-- 编译后为<h2 msgtext="aaa">加camel修饰符</h2>,由于camel将msg-text转化为msgText,html中不区分大小写，所以会将大写都转化为小写，则最终结果为msgtext -->

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/36455.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mybatis 中的＜![CDATA[ ]]＞用法及说明

mybatis 中的＜![CDATA[ ]]＞用法及说明

<![CDATA[ ]]>作用 <![CDATA[ ]]> 在mybatis、ibatis等书写SQL的xml中比较常见&#xff0c;是一种XML语法&#xff0c;他的作用是 可以忽略xml的转义&#xff08;在该标签中的语句和字符原本是什么样的&#xff0c;在拼接成SQL后还是什么样的&#xff09; 使用&a…
阅读更多...
代码生成模型任务设计

代码生成模型任务设计

背景&#xff1a; 模型应该具备&#xff0c;理解代码的能力、知道代码规则的能力、知道关键词和变量的能力、知道代码逻辑的能力、文本到代码翻译能力、代码关联能力、代码续写能力。 代码理解能力&#xff1a;pretrain让模型读足够多代码、记住代码一些规则、代码问答、基于…
阅读更多...
PHP codeigniter4 搭配Nginx

PHP codeigniter4 搭配Nginx

> 主要是为了用Nginx运行PHP环境 1. Nginx 官方文档的配置 default.conf This configuration enables URLs without “index.php” in them and using CodeIgniter’s “404 - File Not Found” for URLs ending with “.php”. server {listen 80;listen [::]:80;se…
阅读更多...
springboot 基础

springboot 基础

巩固基础&#xff0c;砥砺前行 。 只有不断重复&#xff0c;才能做到超越自己。 能坚持把简单的事情做到极致&#xff0c;也是不容易的。 SpringBoot JavaEE 简介 JavaEE的局限性&#xff1a; 1、过于复杂&#xff0c;JavaEE正对的是复杂的分布式企业应用&#xff0c;然而现实…
阅读更多...
MySQL表的基础的增删改查

MySQL表的基础的增删改查

增(insert into) 插入所有列的数据 不写具体列名要确保字段都对应正确 -- 假设你有一个名为 "employees" 的表&#xff0c;有多个列 INSERT INTO employees VALUES (101, Alice, Manager, 50000);插入指定列的数据 -- 假设你有一个名为 "students" 的表&…
阅读更多...
爬虫如何应对网站的反爬机制？如何查找user-agent对应的值

爬虫如何应对网站的反爬机制？如何查找user-agent对应的值

import requestsurl https://movie.douban.com/top250 response requests.get(url) # 查看结果 print(response)在requests使用一文中我们有讲到&#xff0c;当状态码不是200时表示爬虫不可用&#xff0c;也就是说我们获取不到网页源代码。但是我们还是可以挣扎一下&#xff…
阅读更多...
一文秒懂HTTP协议到底是什么？原理？

一文秒懂HTTP协议到底是什么？原理？

目录 1.什么是http协议&#xff1f; 2.http协议的版本&#xff1f; 3.http文本框架 4.http请求报文 5.http报文格式 6.http响应报文 7.HTTP的状态码 8.HTTP首部介绍 9.什么是URL和URI&#xff1f; 10.CGI是什么&#xff1f; 1.什么是http协议&#xff1f; http&#…
阅读更多...
测试架构师如何落地性能测试方案（一）

测试架构师如何落地性能测试方案（一）

背景描述&#xff1a; 最近刚接手一个新项目&#xff0c;在最开始的时候要求对这个项目做性能测试&#xff0c;产品经理也给不出性能需求&#xff0c;只因为这个项目是电商项目&#xff0c;可能会有高并发&#xff0c;秒杀的场景&#xff0c;所以产品经理要求我们对这个项目必…
阅读更多...
vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用

vue3父子组件传值；vue3子组件传值给父组件；vue3子组件监听父组件接口传值；父子组件事件调用

代码在文末&#xff0c;均可直接复制使用 本文主要描述&#xff0c;父子组件传值、调用等问题 文章目录 问题1&#xff1a;子组件接收不到父组件传值问题2&#xff1a;子组件接受的值&#xff0c;修改后&#xff0c;发现父组件值也改变了问题3&#xff1a;子组件接受值&#xf…
阅读更多...
07-HDFS入门及shell命令

07-HDFS入门及shell命令

1 文件系统 是一种存储和组织数据的方法&#xff0c;它使得文件访问和查询变得容易使得文件和树形目录的抽象逻辑概念代替了磁盘等物理设备使用数据块的概念&#xff0c;用户使用文件系统来保存数据不必关心数据底层存在硬盘哪里&#xff0c;只需记住这个文件的所属目录和文件…
阅读更多...
STM32基于CubeIDE和HAL库 基础入门学习笔记：物联网项目开发流程和思路

STM32基于CubeIDE和HAL库 基础入门学习笔记：物联网项目开发流程和思路

文章目录&#xff1a; 第一部分&#xff1a;项目开始前的计划与准备 1.项目策划和开发规范 1.1 项目要求文档 1.2 技术实现文档 1.3 开发规范 2.创建项目工程与日志 第二部分&#xff1a;调通硬件电路与驱动程序 第三部分&#xff1a;编写最基础的应用程序 第四部分&…
阅读更多...
opencv带GStreamer之Windows编译

opencv带GStreamer之Windows编译

目录 1、下载GStreamer和安装2. GSTReamer CMake配置3. 验证是否配置成功 1、下载GStreamer和安装 下载地址如下&#xff1a; gstreamer-1.0-msvc-x86_64-1.18.2.msi gstreamer-1.0-devel-msvc-x86_64-1.18.2.msi 安装目录无要求&#xff0c;主要是安装完设置环境变量 xxx\1…
阅读更多...
【css】渐变

【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型&#xff1a; 线性渐变&#xff08;向下/向上/向左/向右/对角线&#xff09; 径向渐变&#xff08;由其中心定义&#xff09; 1、线性渐变 语法&#xff1a;background-image: linear-gradient(direction, co…
阅读更多...
一图搞懂二层交换机、三层交换机和路由器的区别

一图搞懂二层交换机、三层交换机和路由器的区别

二层交换机、三层交换机、路由器的区别 二层交换机、三层交换机、路由器对比二层交换机三层交换机路由器工作在第几层数据链路层&#xff08;第二层&#xff09;网络层&#xff08;第三层&#xff09;网络层&#xff08;第三层&#xff09;功能学习和转发帧根据IP地址转发数据…
阅读更多...
数据链路层是什么？

数据链路层是什么？

数据链路层承接上层的数据&#xff0c;然后使用下层提供的信道&#xff0c;按照一定的规则&#xff0c;进行数据传输。 物理层提供了传输媒体与连接&#xff08;信道&#xff09;&#xff08;数据链路层使用的信道通常是物理层提供的信道&#xff09;&#xff0c;即提供了比特…
阅读更多...
webpack自动注册全局组件

webpack自动注册全局组件

例如&#xff0c;在form文件夹下有许多流程类表单&#xff0c;一个一个注册引入非常浪费时间&#xff0c;可使用webpack的require.context方法来自动导入 import { firstToUpper } from /utils/methodsconst taskTable {install: vue > {const req require.context(../fo…
阅读更多...
springboot结合element-ui实现增删改查，附前端完整代码

springboot结合element-ui实现增删改查，附前端完整代码

实现功能 前端完整代码 后端接口 登录&#xff0c;注册&#xff0c;查询所有用户&#xff0c;根据用户名模糊查询&#xff0c;添加用户&#xff0c;更新用户&#xff0c;删除用户 前端 注册&#xff0c;登录&#xff0c;退出&#xff0c;用户增删改查&#xff0c;导航栏&#…
阅读更多...
Android Sutdio 导入libs文件夹下的jar包没反应

Android Sutdio 导入libs文件夹下的jar包没反应

有点离谱&#xff0c;笨笨的脑子才犯的错误 首先发现问题&#xff1a;转移项目的时候 直接复制粘贴libs文件夹下的jar包到新项目&#xff0c;在build.gradle文件下 使用语句并应用也没反应&#xff08;jar包没有出现箭头且代码报错&#xff0c;找不到&#xff09; implementa…
阅读更多...
什么样的 PLC 可以算是高端 PLC？

什么样的 PLC 可以算是高端 PLC？

针对问题本身&#xff0c;有的回答里都提到了。可靠性&#xff0c;扫描时间&#xff0c;带离散量点数&#xff0c;带模拟量输出点数&#xff0c;扩展性&#xff0c;这些都可以看作PLC系统级别划分的依据。比如说&#xff0c;有相应安全完整性等级认证的LOGIC SOLVER为核心的PLC…
阅读更多...
SpringBoot复习：（37）自定义ErrorController

SpringBoot复习：（37）自定义ErrorController

所有接口统一返回的数据格式 package cn.edu.tju.domain;public class MyResponse {private int code;private String message;private String exception;private String stack;public int getCode() {return code;}public void setCode(int code) {this.code code;}public S…
阅读更多...
最新文章

Copyright @ 2022~2023