当前位置: 首页 > 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;…...

JekyllNet .Net 版本的Jekyll , 你博客 文档的静态生成利器 。

若君只欲一篇而尽知 JekyllNet 今可如何用&#xff0c;此文即其总册。 项目入口 仓库地址&#xff1a;https://github.com/JekyllNet/JekyllNet文档网站&#xff1a;https://jekyllnet.helpGitHub Pages 站点入口(仓库 Pages)&#xff1a;https://jekyllnet.github.io/JekyllNe…...

长期用嘴呼吸,颈肩肌肉代偿性紧张

很多人因为鼻塞、习惯等原因长期用嘴呼吸&#xff0c;却不知道这会导致颈肩肌肉代偿性紧张&#xff0c;影响颈腰椎健康。用嘴呼吸时&#xff0c;头部会不自觉地向前伸、仰起&#xff0c;颈椎长期处于过度前屈或后伸状态&#xff0c;颈部肌肉持续牵拉&#xff0c;容易导致肌肉劳…...

别再只会看原理图了!用Multisim仿真带你深入理解运放的“虚短虚断”与反馈

用Multisim仿真破解运放"虚短虚断"的底层逻辑 在电子电路设计中&#xff0c;运算放大器就像一位沉默的魔术师&#xff0c;用"虚短"和"虚断"两个基本概念演绎着各种精妙的信号处理戏法。但很多工程师在学习阶段只是机械记忆这两个术语&#xff0c…...

高效智能转换方案:B站缓存视频一键处理实战指南

高效智能转换方案&#xff1a;B站缓存视频一键处理实战指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 在B站视频频繁下架的当下&#xff0c…...

Janus-Pro-7B效果展示:手写体/表格/多语言混合OCR识别准确率实测

Janus-Pro-7B效果展示&#xff1a;手写体/表格/多语言混合OCR识别准确率实测 1. 引言 你有没有遇到过这样的场景&#xff1f;翻出一张老照片&#xff0c;背面是长辈用钢笔写下的寄语&#xff0c;字迹有些潦草&#xff0c;想把它转成电子版保存&#xff0c;却一个字也认不出来…...

CLIP ViT-H-14多场景适配方案:教育题库图像索引、医疗报告配图推荐、设计素材库检索

CLIP ViT-H-14多场景适配方案&#xff1a;教育题库图像索引、医疗报告配图推荐、设计素材库检索 1. 项目概述 CLIP ViT-H-14图像编码服务是基于CLIP ViT-H-14(laion2B-s32B-b79K)模型的图像特征提取解决方案。这项服务通过RESTful API和Web界面两种方式&#xff0c;为不同行业…...

电视盒子变身高性能服务器:Armbian系统终极刷机指南

电视盒子变身高性能服务器&#xff1a;Armbian系统终极刷机指南 【免费下载链接】amlogic-s9xxx-armbian Supports running Armbian on Amlogic, Allwinner, and Rockchip devices. Support a311d, s922x, s905x3, s905x2, s912, s905d, s905x, s905w, s905, s905l, rk3588, rk…...

Qwen2.5-VL-7B-Instruct开源大模型:支持中文优先的多模态理解部署方案

Qwen2.5-VL-7B-Instruct开源大模型&#xff1a;支持中文优先的多模态理解部署方案 1. 项目概述 Qwen2.5-VL-7B-Instruct是一款开源的视觉-语言多模态大模型&#xff0c;特别针对中文场景进行了优化。该模型能够同时处理图像和文本输入&#xff0c;实现跨模态的理解与生成任务…...

Qwen3.5-2B轻量化技术解析:模型剪枝+KV Cache优化如何降低70%显存占用

Qwen3.5-2B轻量化技术解析&#xff1a;模型剪枝KV Cache优化如何降低70%显存占用 1. 轻量化模型的核心价值 在AI模型部署领域&#xff0c;大模型的资源消耗一直是阻碍其广泛应用的瓶颈。Qwen3.5-2B作为一款仅20亿参数的多模态基础模型&#xff0c;通过创新的轻量化技术实现了…...

Ostrakon-VL终端实战:从扫码识别到生成抖音短视频脚本的创意延伸

Ostrakon-VL终端实战&#xff1a;从扫码识别到生成抖音短视频脚本的创意延伸 1. 像素特工终端介绍 想象你是一名零售侦探&#xff0c;手持的不是笨重的扫描枪&#xff0c;而是一个充满复古游戏风格的AI终端。这就是基于Ostrakon-VL-8B模型开发的像素风格交互界面&#xff0c;…...