当前位置: 首页 > news >正文

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,不然也不生效
请添加图片描述

相关文章:

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

v-model是表单组件里面的核心知识点&#xff0c;这个指令给我们写表单业务带来了很大的方便。 元素标签上的 v-model 指令用于双向绑定数据,它是一个语法糖&#xff0c;可以用于代替 v-bind:value 和 input 例如&#xff1a;<input v-model"message" placeholder…...

【高分系列卫星简介——高分一号(GF-1)】

高分一号卫星&#xff08;GF-1&#xff09; 高分一号&#xff08;GF-1&#xff09;是中国高分辨率对地观测系统&#xff08;简称“高分专项”&#xff09;的第一颗卫星&#xff0c;具有里程碑式的意义。以下是对高分一号卫星的详细介绍&#xff1a; 一、基本信息 发射时间&…...

Python基于TensorFlow实现时间序列循环神经网络回归模型(LSTM时间序列回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 随着信息技术的发展和传感器设备的广泛应用&#xff0c;时间序列数据的产生量急剧增加。无论是股市价格…...

springboot实战学习(6)(用户模块的登录认证)(初识令牌)(JWT)

接着上篇博客学习。上篇博客是在基本完成用户模块的注册接口的开发以及注册时的参数合法性校验的基础上&#xff0c;基本完成用户模块的登录接口的主逻辑。具体往回看了解的链接如下。 springboot实战学习笔记&#xff08;5&#xff09;(用户登录接口的主逻辑)-CSDN博客文章浏览…...

二叉树的顺序存储和基本操作实现

写代码&#xff1a;定义顺序存储的二叉树&#xff08;数组实现&#xff0c;树的结点从数组下标1开始存储&#xff09; 基于上述定义&#xff0c;写一个函数 int findFather ( i ) &#xff0c;返回结点 i 的父节点编号 基于上述定义&#xff0c;写一个函数 int leftChild ( i…...

python学习-10【模块】

1、认识模块 导入模块 使用 import 语句使用 from … import 语句 1、import modulename [as alias] modulename&#xff1a;表示要导入的模块名as alias&#xff1a;可选参数&#xff0c;为模块起的别名 2、from modulename import name modulename&#xff1a;模块名&#x…...

modbus调试助手/mqtt调试工具/超轻巧物联网组件/多线程实时采集/各种协议支持

一、前言说明 搞物联网开发很多年&#xff0c;用的最多的当属modbus协议&#xff0c;一个稳定好用的物联网组件是物联网平台持续运行多年的基石&#xff0c;所以这个物联网组件从一开始就定位于自研&#xff0c;为了满足各种场景的需求&#xff0c;当然最重要的一点就是大大提…...

数值计算 --- 平方根倒数快速算法(0x5f3759df,这是什么鬼!!!)

平方根倒数快速算法 --- 向Greg Walsh致敬&#xff01; 1&#xff0c;牛顿拉夫逊 已知x&#xff0c;要计算&#xff0c;假设的值为a&#xff0c;则&#xff1a; &#xff0c;&#xff08;式1&#xff09; 如果定义一个自变量为a的函数f(a): 则&#xff0c;令函数f(a)等于0的a就…...

迭代器和生成器的学习笔记

迭代器 Python 迭代器是一种对象&#xff0c;它实现了迭代协议&#xff0c;包括 __iter__() 和 __next__() 方法。迭代器可以让你在数据集中逐个访问元素&#xff0c;而无需关心数据结构的底层实现。与列表或其他集合相比&#xff0c;迭代器可以节省内存&#xff0c;因…...

ES5 在 Web 上的现状

最后一个支持 ES5 的浏览器 IE 11 在 2022 年被微软停止支持&#xff0c;那么今天 Web 上的 ES5 现状如何&#xff1f;在构建生产代码时&#xff0c;Web 开发者的最佳实践是什么&#xff1f; 本文将通过数据来回答这些问题&#xff0c;并基于这些数据为网站开发者和库作者提供一…...

人话学Python-循环语句

一&#xff1a;while语句 while语句的组成由判断条件和执行语句组成。当满足条件时会不断执行后续语句&#xff0c;然后再循环执行的语句结束之后再次回到条件判断&#xff0c;如此循环。 pos 0 ans 0 while pos < 6:ans pos * 4pos 1 print(ans)>>>84"&…...

初识模版!!

初识模版 1.泛型编程1.1 如何实现一个交换函数呢&#xff08;使得所有数据都可以交换&#xff09;&#xff1f;1.2 那可以不可以让编译器根据不同的类型利用该模子来生成代码呢&#xff1f; 2.模版类型2.1 模版概念2.2 函数模版的原理2.3 函数模板的实例化2.4 模板参数的匹配原…...

算法之数学--hash算法 2021-03-11(未完待续)

1.hash算法 刷出一道墙 题目描述 Time Limit: 2000 ms Memory Limit: 256 mb 在一面很长的墙壁上&#xff0c;工人们用不同的油漆去刷墙&#xff0c;然而可能有些地方刷过以后觉得不好看&#xff0c;他们会重新刷一下。有些部分因为重复刷了很多次覆盖了很多层油漆&#xff…...

DHCP工作原理

在学习之前先提出几个问题&#xff1a;什么是DHCP&#xff1f;为什么要使用DHCP&#xff1f;在什么场景中使用DHCP&#xff1f;DHCP报文的目的IP和目的MAC是多少&#xff1f;DHCP报文是基于UDP还是基于TCP&#xff1f;DHCP服务器返回的报文中都包含什么信息&#xff1f; DHCP&a…...

服务发现和代理实例的自动更新

☞ 返回总目录 1.服务发现的两种方式 StartFindService 方法 这是一个在后台启动的连续 “FindService” 活动&#xff0c;当服务实例的可用性发生变化时&#xff0c;会通过回调通知调用者。 它返回一个FindServiceHandle&#xff0c;可通过调用StopFindService来停止正在进行…...

Redis的三种持久化方法详解

Redis持久化机制详解 | JavaGuide Redis 不同于 Memcached 的很重要一点就是&#xff0c;Redis 支持持久化&#xff0c;而且支持 3 种持久化方式: 快照&#xff08;snapshotting&#xff0c;RDB&#xff09;只追加文件&#xff08;append-only file, AOF&#xff09;RDB 和 A…...

OpenAI GPT o1技术报告阅读(5)-安全性对齐以及思维链等的综合评估与思考

✨继续阅读报告&#xff1a;使用大模型来学习推理(Reason) 原文链接&#xff1a;https://openai.com/index/learning-to-reason-with-llms/ 编码 我们训练了一个模型&#xff0c;在2024年国际信息学奥林匹克竞赛&#xff08;IOI&#xff09;中得分213分&#xff0c;排名在第…...

nodejs 012:Babel(巴别塔)语言转换与代码兼容

这里写目录标题 安装 Babel配置presets配置&#xff1a;常见的 Babel Presetsplugins配置&#xff1a;以 plugin-transform-class-properties 的类中属性为例index.jsx Babel 是一个独立的 JavaScript 编译器&#xff0c;主要用于将现代 JavaScript 代码转换为旧版本的 JavaScr…...

时间安全精细化管理平台存在未授权访问漏洞

漏洞描述 登录--时间&amp;安全精细化管理平台存在未授权访问漏洞导致与员工信息泄露 FOFA&#xff1a; body"登录--时间&amp;安全精细化管理平台" 漏洞复现 POC: IP/acc/_checkinoutlog_/...

软件卸载工具(windows系统)-geek

有时候软件卸载会很麻烦&#xff0c;使用geek会比较方便。但是针对一些特别大的软件&#xff0c;geek也好像会稍微费点劲&#xff08;比如MATLAB2022A&#xff09;,不过针对一般常规软件的卸载&#xff0c;geek就可以有效地完全卸载了&#xff0c;使用方法也很简单&#xff0c;…...

Topit:macOS窗口置顶神器,让多任务处理效率翻倍

Topit&#xff1a;macOS窗口置顶神器&#xff0c;让多任务处理效率翻倍 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 你是否经常在macOS上同时处理多个任务时…...

Sangfor文件夹可以删除吗?【图文讲解】深信服文件夹残留清理?如何彻底删除深信服?Sangfor文件夹是什么?

&#xff08;1&#xff09;问题背景打开C盘&#xff0c;突然冒出个Sangfor 文件夹&#xff0c;占用好几个 GB 空间&#xff0c;想删又不敢删&#xff0c;怕删坏系统、断网崩溃&#xff1b;上网一查&#xff0c;说法五花八门&#xff0c;有人说是病毒&#xff0c;有人说是办公软…...

阿波罗登月,不可能:读心术与影子叙事 ——不是向全世界展示登月,而是向全世界注射登月

阿波罗登月&#xff0c;不可能&#xff1a;读心术与影子叙事 ——不是向全世界展示登月&#xff0c;而是向全世界注射登月 Jianbing Zhu 1^{1}1 1^{1}1 ECT-OS-JiuHuaShan 文明实验室 ORCID: 0009-0006-8591-1891 DOI: 10.5281/zenodo.20373157 Email: ect-os-jiuhuashanzoho…...

【数据结构与算法】数据结构基础——栈和队列

目录栈和队列1. 栈1.1 栈的概念1.2 栈的实现方式分析1.3 栈的实现1.3.1 栈的初始化与销毁1.3.2 入栈与出栈1.3.3 栈的判空与有效元素个数1.3.4 栈顶元素1.4 栈的扩展1.4.1 两栈共享空间2. 队列2.1 队列的概念2.2 队列的实现方式分析2.3 队列的实现2.3.1 队列的初始化与销毁2.3.…...

对比自行维护多个 API 源,使用 Taotoken 聚合服务在运维复杂度上的降低

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比自行维护多个 API 源&#xff0c;使用 Taotoken 聚合服务在运维复杂度上的降低 在构建依赖多个大语言模型的应用时&#xff0c…...

【C++】零基础入门 · 第 6 节:数组

上一节我们学习了函数,知道了如何把代码封装起来方便复用。但在实际编程中,你很快就会遇到一个问题:如果要存储 100 个学生的成绩,难道要定义 100 个变量吗?这显然不现实。数组就是 C++ 给出的答案——它让我们能用一个变量名管理一组相同类型的数据。 1. 为什么需要数组…...

Godot 4.2 + C# 避坑指南:手把手教你打包发布你的第一个2D游戏到Steam

Godot 4.2 C# 避坑指南&#xff1a;从开发到Steam发布的完整实战手册当你终于完成心爱的2D游戏开发&#xff0c;准备向全世界展示你的作品时&#xff0c;打包发布这个看似简单的环节往往会成为独立开发者最大的噩梦。特别是使用Godot 4.2搭配C#的项目&#xff0c;从导出设置到…...

基于ISDN信令的来电语音播报系统:从原理到树莓派实现

1. 项目概述&#xff1a;一个基于ISDN的来电语音播报系统如果你家里或办公室里还有一台老式的ISDN路由器&#xff0c;别急着把它当电子垃圾处理掉。我最近就利用手头一台闲置的ISDN路由器&#xff0c;折腾出了一个挺有意思的小玩意儿&#xff1a;一个能自动识别来电号码&#x…...

完整解决方案:PL2303 Windows 10驱动快速安装指南

完整解决方案&#xff1a;PL2303 Windows 10驱动快速安装指南 【免费下载链接】pl2303-win10 Windows 10 driver for end-of-life PL-2303 chipsets. 项目地址: https://gitcode.com/gh_mirrors/pl/pl2303-win10 如果你正在Windows 10系统上使用PL-2303HXA或PL-2303XA芯…...

BurpSuite+SqlMap深度集成:构建高可信SQL注入检测流水线

1. 这不是“点几下就出结果”的玩具&#xff0c;而是你真正能放进渗透流程里的SQL注入检测流水线很多人第一次看到“BurpSuiteSqlMap插件5分钟搞定SQL注入检测”这个标题&#xff0c;第一反应是&#xff1a;又一个标题党&#xff1f;点开全是截图堆砌、参数照抄、报错就卡住的半…...