vue2基础系列教程之v-model及面试高频问题

v-model是表单组件里面的核心知识点,这个指令给我们写表单业务带来了很大的方便。
请添加图片描述

  • 元素标签上的 v-model 指令用于双向绑定数据,它是一个语法糖,可以用于代替 v-bind:value@input

    • 例如:<input v-model="message" placeholder="edit me">
    • 相当于:<input :value="message" @input="message = $event.target.value">
  • 组件上的 v-model 指令默认会使用 value 属性与组件数据双向绑定,可以通过 model 选项来更改

一般使用

const inputTemplate = `<input :placeholder="message" v-bind:value="value" @input="updateValue" />`;
Vue.component("custom-input", {template: inputTemplate,props: ["value", "message"],methods: {updateValue(e) {this.$emit("input", e.target.value);},},
});var app = new Vue({el: "#app",data() {return {message: "",username: "",};},methods: {onFocus() {this.message = "输入框被点击了";},onBlur() {this.message = "";},},
});
<div id="app"><h3>{{username}}</h3><custom-input v-model="username" :placeholder="message" />
</div>

自定义组件绑定原生事件

## 自定义组件绑定原生事件

根据 vue 的设计理念,自定义组件上的属性和事件,会默认绑定到组件的根元素上,如果想要绑定到组件的原生事件上,需要使用 .native 修饰符。
也就是我们在组件内部不使用 props 进行显示的接受,这些属性和事件会默认的绑定到组件的根元素上。 @focus.native="onFocus" @blur.native="onBlur" class="custom-input" 这三个属性我在组件内部没有使用 props 进行接受,但是却可以正常的使用。

<div id="app"><h3>{{username}}</h3><custom-inputclass="custom-input"v-model="username":placeholder="message"@focus.native="onFocus"@blur.native="onBlur"/>
</div>
const inputTemplate = `<input :placeholder="message" v-bind:value="value" @input="updateValue" />`;
Vue.component("custom-input", {template: inputTemplate,props: ["value", "message"],methods: {updateValue(e) {this.$emit("input", e.target.value);},},
});var app = new Vue({el: "#app",data() {return {message: "请输入要显示的文字",username: "",};},methods: {onFocus() {this.message = "输入框被点击了";},onBlur() {this.message = "";},},
});

请添加图片描述

关于inheritAttrs

在 vue2.4 版本中,新增了 inheritAttrs 选项,默认情况下,组件上没有在 props 中声明的属性会被添加到组件的根元素上。
有时候,我们不希望这些属性添加到组件的根元素上,可以通过设置 inheritAttrs: false 来关闭这个功能。
同时,改造下inputTemplate

请添加图片描述
这时候,我们发现focusblur事件失效了,没有报错,就是没有触发。
这种情况,就需要我们手动来处理了,原因就是上面的原理

const inputTemplate = `<label>{{label}}<input  :placeholder="placeholder" :value="value" @input="updateValue" v-on="customListeners"/></label>`;
Vue.component("custom-input", {inheritAttrs: false,template: inputTemplate,props: ["value", "placeholder", "label"],methods: {updateValue(e) {this.$emit("input", e.target.value);},},computed: {customListeners() {var vm = this;console.log("🚀 ~ customListeners ~ this.$listeners:", this.$listeners);return Object.assign({}, this.$listeners, {input: (e) => {vm.$emit("input", e.target.value);},});},},
});var app = new Vue({el: "#app",data() {return {message: "请输入要显示的文字",username: "",label: "账号:",};},methods: {onFocus() {this.message = "输入框被点击了";},onBlur() {this.message = "";},},
});
<div id="app"><h3> {{username}}</h3><custom-input class="custom-input" v-model="username" :placeholder="message" @focus="onFocus" @blur="onBlur" :label="label"/>
</div>

注意这里@focus="onFocus" @blur="onBlur",要去掉.native,不然也不生效
请添加图片描述

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

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

相关文章

Springboot中mybatis的使用

一.创建Springboot项目并加载依赖 1.利用IDEA创建SpringBoot项目&#xff0c;并勾选必须依赖&#xff0c;步骤如下&#xff08;IDEA版本为2024版&#xff09; 注意&#xff1a; 1.首先更换镜像源&#xff0c;否则加载配置环境比较慢&#xff0c;网上搜阿里的镜像源就行。 2…

Python数据类型详解:这12个类型你都知道吗?

在Python中&#xff0c;数据类型是编程的基石&#xff0c;它们定义了可以操作的数据的种类。Python是一种动态类型语言&#xff0c;意味着你不需要显式地声明变量的类型&#xff1b;Python解释器会自动推断出变量所存储数据的类型。Python提供了多种内置数据类型&#xff0c;这…

c++类和对象(3):默认成员函数(下)

1.拷贝构造函数 如果⼀个构造函数的第⼀个参数是自身类类型的引用&#xff0c;且任何额外的参数都有默认值&#xff0c;则此构造函数也叫做拷贝构造函数&#xff0c;也就是说拷贝构造是⼀个特殊的构造函数。 c规定&#xff1a;类类型的传值传参必须用拷贝构造 1.1拷贝构造函数…

OpenAI 刚刚推出 o1 大模型!!突破LLM极限

北京时间 9 月 13 日午夜&#xff0c;OpenAI 正式发布了一系列全新的 AI 大模型&#xff0c;专门用于应对复杂问题。 这一新模型的出现代表了一个重要突破&#xff0c;其具备的复杂推理能力远远超过了以往用于科学、代码和数学等领域的通用模型&#xff0c;能够解决比之前更难的…

近期常见软件测试面试题

1、软件的生命周期&#xff1a; 又称为软件生命期、生存期&#xff0c;是指从形成开发软件概念起&#xff0c;所开发的软件使用以后&#xff0c;直到失去使用价值消亡为止的整个过程。 一般来说&#xff0c;整个生命周期包括&#xff1a;计划&#xff08;定义&#xff09;、开…

上汽大众:存储成本节约85%,查询性能提升5倍|OceanBase案例

近日&#xff0c;上汽大众汽车有限公司&#xff08;简称“上汽大众”&#xff09;的积分卡券等关键业务系统&#xff0c;已成功升级至 OB Cloud 云数据库。借助 OceanBase 原生分布式数据库的卓越性能与先进技术&#xff0c;实现了存储成本的大幅降低&#xff0c;高达85%&#…

初级软件测试面试题汇总

一、请描述如何划分缺陷与错误严重性和优先级别&#xff1f; 给软件缺陷与错误划分严重性和优先级的通用原则&#xff1a; &#xff08;1&#xff09;表示软件缺陷所造成的危害和恶劣程度。 &#xff08;2&#xff09;优先级表示修复缺陷的重要程度和次序。 严重性&#xf…

Python 课程6-Pandas 和 Matplotlib库

前言 在数据科学和数据分析领域&#xff0c;Pandas 和 Matplotlib 是两个最常用的 Python 库。Pandas 主要用于数据处理和分析&#xff0c;而 Matplotlib 则用于数据的可视化。它们的结合能够帮助我们快速、直观地展示数据的趋势和规律。在这篇详细的教程中&#xff0c;教程中将…

自动驾驶:LQR、ILQR和DDP原理、公式推导以及代码演示(六、ILQR正则化和line search)

&#xff08;六&#xff09;ILQR正则化和line search 1. ILQR正则化 在iLQR中&#xff0c;我们通常线性化系统动力学并对目标函数进行二阶近似。在反向传播步骤中&#xff0c;我们需要计算逆矩阵&#xff08;控制变量对目标函数的二阶导数矩阵&#xff09;&#xff0c;用以更…

驰域货车四路监控ts视频格式化恢复方法

不少大货车都使用了驰域货车监控&#xff0c;一般是至少装四路&#xff0c;前后左右&#xff0c;有的还会车顶加一路。驰域货车记录仪特殊的地方在于&#xff1a;其采用了一种上古时期的视频格式----TS视频流。 故障存储: 128G卡/fat32 故障现象: 客户提供的信息是格式化后…

软件安装攻略:EmEditor编辑器下载安装与使用

EmEditor是一款在Windows平台上运行的文字编辑程序。EmEditor以运作轻巧、敏捷而又功能强大、丰富著称&#xff0c;得到许多用户的好评。Windows内建的记事本程式由于功能太过单薄&#xff0c;所以有不少用户直接以EmEditor取代&#xff0c;emeditor是一个跨平台的文本编辑器&a…

【STM32】外部中断

当程序正常运行执行main函数&#xff0c;此时如果外部中断来了&#xff0c;执行外部中断函数&#xff0c;实现相应的功能&#xff0c;然后就可以回到main. 一般stm32芯片每个引脚都有自己的外部中断&#xff0c;但是为了限制&#xff0c;会有一个中断线&#xff0c;对应一个中断…

搭建内网文件服务器(FTP),以及实现内网Gitee

一、实现windows搭建FTP&#xff0c;实现文件共享和管理 具体步骤&#xff1a; 1.打开控制面板&#xff0c;搜索功能 2.打开这几个配置 3.打开IIS&#xff0c;添加FTP站点即可 二、实现内网Gitee 参考博客&#xff1a; Gitblit服务器搭建及Git使用-CSDN博客 jdk1.8.0的安…

零基础国产GD32单片机编程入门(二十五)USB口介绍及CDC类虚拟串口通讯详解及源码

文章目录 一.概要二.USB2.0基本介绍及虚拟串口介绍三.GD32单片机USB模块框图四.GD32单片机USB设备模式五.GD32F103C8T6 USB设备CDC类六.配置一个USB虚拟串口收发例程七.工程源代码下载八.小结 一.概要 GD32F103C8T6 USB虚拟串口是一种采用GD32F103C8T6单片机&#xff0c;通过U…

vscode中使用go环境配置细节

1、在docker容器中下载了go的sdk 2、在/etc/profile.d/go.sh里填入如下内容&#xff1a; #!/bin/bashexport GOROOT/home/ud_dev/go export PATH$GOROOT/bin:$PATH3、设置go env go env -w GOPROXYhttps://goproxy.cn,direct go env -w GO111MODULEon 4、重启这个容器&#…

Java之ArrayList

1.ArrayList的简介 在集合框架中&#xff0c;ArrayList是一个普通的类&#xff0c;实现了List接口&#xff0c;具体框架图如下&#xff1a; ArrayList是以泛型方式实现的&#xff0c;使用时必须要先实例化ArrayList实现了RandomAccess接口&#xff0c;表明ArrayList支持随机…

springboot对数据库进行备份+对一个文件夹内的文件按时间排序,只保留最近的8个文件

首先&#xff0c;对数据库进行备份&#xff0c;用到的命令&#xff1a; mysqldump --opt -h 192.168.1.200 --userroot --passwordxxx --result-fileE://data//20240911141400.sql --default-character-setutf8 xxx&#xff08;数据库名&#xff09; 直接上代码 配置文件部分…

速通GPT-3:Language Models are Few-Shot Learners全文解读

文章目录 GPT系列论文速通论文实验总览1. 任务设置与测试策略2. 任务类别3. 关键实验结果4. 数据污染与实验局限性5. 总结与贡献 Abstract1. 概括2. 具体分析3. 摘要全文翻译4. 为什么不需要梯度更新或微调⭐ Introduction1. 概括2. 具体分析3. 进一步分析 Approach1. 概括2. 具…

app抓包 chrome://inspect/#devices

一、前言&#xff1a; 1.首先不支持flutter框架&#xff0c;可支持ionic、taro 2.初次需要翻墙 3.app为debug包&#xff0c;非release 二、具体步骤 1.谷歌浏览器地址&#xff1a;chrome://inspect/#devices qq浏览器地址&#xff1a;qqbrowser://inspect/#devi…

C++:C++的IO流

✨✨✨学习的道路很枯燥&#xff0c;希望我们能并肩走下来! 文章目录 目录 文章目录 前言 一 C语言的输入与输出 二 流 三 CIO流 ​编辑 3.1 C标准IO流 3.2 C文件IO流 3.3 stringstream的简单介绍 四 CIO流的效率问题 总结 前言 本篇详细介绍了进一步介绍C中的IO流&#…