我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定,我们知道 v-model 本质上不过是语法糖,v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

  • text 和 textarea 元素使用 value 属性和 input 事件;
  • checkbox 和 radio 使用 checked 属性和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。

以 input 表单元素为例:

<input v-model='something'>

相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中,v-model 默认会利用名为 value 的 prop 和名为 input 的事件,如下所示:

父组件:
<ModelChild v-model="message"></ModelChild> 子组件:
<div>{{value}}</div> props:{
value: String
},
methods: {
test1(){
this.$emit('input', '小红')
},
},

v-model 的原理?的更多相关文章

  1. Python面向对象篇之元类,附Django Model核心原理

    关于元类,我写过一篇,如果你只是了解元类,看下面这一篇就足够了. Python面向对象之类的方法和属性 本篇是深度解剖,如果你觉得元类用不到,呵呵,那是因为你不了解Django. 在Python中有一 ...

  2. DPM(Deformable Part Model)原理详解(汇总)

    写在前面: DPM(Deformable Part Model),正如其名称所述,可变形的组件模型,是一种基于组件的检测算法,其所见即其意.该模型由大神Felzenszwalb在2008年提出,并发表 ...

  3. Attention Model(注意力模型)思想初探

    1. Attention model简介 0x1:AM是什么 深度学习里的Attention model其实模拟的是人脑的注意力模型,举个例子来说,当我们观赏一幅画时,虽然我们可以看到整幅画的全貌,但 ...

  4. 从item-base到svd再到rbm,多种Collaborative Filtering(协同过滤算法)从原理到实现

    http://blog.csdn.net/dark_scope/article/details/17228643 〇.说明 本文的所有代码均可在 DML 找到,欢迎点星星. 一.引入 推荐系统(主要是 ...

  5. 使用RStudio调试(debug)基础学习(二)和fGarch包中的garchFit函数估计GARCH模型的原理和源码

    一.garchFit函数的参数--------------------------------------------- algorithm a string parameter that deter ...

  6. 什么是V模型?使用SDLC和STLC学习案例研究

    本教程详细介绍了软件/系统开发生命周期(SDLC),如瀑布循环和迭代循环,如RAID和Agile.此外,它继续解释测试的V模型和STLC(软件测试生命周期). 假设为您分配了一项任务,即为客户开发自定 ...

  7. python基础之继承原理,多态与封装

    1.什么是继承? 继承是一种创建新的类的方式.class A: passclass B: pass2.如何继承---->如何寻找继承关系 现实生活中找继承关系是自下而上,在程序中写是自上而下继承 ...

  8. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  9. 不可错过的效能利器「GitHub 热点速览 v.22.39」

    如果你是一名前端工程师且维护着多个网站,不妨试试本周榜上有名的 HTML-first 的 Qwik,提升网站访问速度只用一招.除了提升网站加载速度的 Qwik,本周周榜上榜的 Whisper 也是一个 ...

  10. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

随机推荐

  1. ansible(15)--ansible的mount模块

    1. mount模块 功能:管理被控端设备挂载: 主要参数如下: 参数 说明 src 本地或远程设备的路径 path 设备挂载至本地的路径 fstype 挂载的文件系统类型,xfs.nfs... op ...

  2. 一篇文章掌握Python中多种表达式的使用:算术表达式、字符串表达式、列表推导式、字典推导式、_集合推导式、_生成器表达式、逻辑表达式、函数调用表达式

    Python 中的表达式可以包含各种元素,如变量.常量.运算符.函数调用等.以下是 Python 表达式的一些分类及其详细例子: 1. 算术表达式 算术表达式涉及基本的数学运算,如加.减.乘.除等. ...

  3. fastposter v2.9.0 程序员必备海报生成器

    fastposter v2.9.0 程序员必备海报生成器 fastposter海报生成器是一款快速开发海报的工具.只需上传一张背景图,在对应的位置放上组件(文字.图片.二维.头像)即可生成海报. 点击 ...

  4. 让AnaTraf成为您网络流量分析的最佳利器

    在快速发展的数字时代,企业对网络性能的监测与分析需求愈加旺盛.作为网络性能监测与诊断(NPMD)领域的佼佼者,AnaTraf网络流量分析仪凭借其出色的性能和易用性,正成为网络管理人员的首选工具. An ...

  5. vue3.4中defineModel中默认值是复杂数据类型 (注意!!!)

    const drillFields = defineModel<string[]>('drillFields', { get(val) { return reactive(val || [ ...

  6. toLua中Lua调用C#中的类

    toLua中Lua调用C#: [7]Lua脚本调用C#中的class 准备工作:打算在Lua脚本中使用Debug,使用lua调用C#脚本,需要绑定LuaState和自定义添加Debug --- --- ...

  7. USRP B210 软件定义的无线网络(SDR)支撑设备

    目录 文章目录 目录 蜂窝网络 蜂窝网络的组成 USRP B210 USRP B210 的功能清单与相关参数 USRP B210 的系统结构与运行原理 相关知识储备 SDR RFIC RF 发展历程 ...

  8. SSL/TSL 总结

    参考:https://blog.csdn.net/qq153471503/article/details/109524764 (一)生成CA证书 1.创建CA证书私钥openssl genrsa -a ...

  9. MyBatis数据源模块源码分析

    数据源对象是比较复杂的对象,其创建过程相对比较复杂,对于 MyBatis 创建数据源,具体来讲有如下难点: MyBatis 不但要能集成第三方的数据源组件,自身也提供了数据源的实现: 数据源的初始化参 ...

  10. cent os docker yum源

    国外镜像一般很难访问,建议配置阿里云镜像.yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/ ...