我们在 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. LVS负载均衡(4)-- LVS FWM防火墙标记

    防火墙标记的作用是:借助于防火墙标记来分类报文,然后基于标记定义集群服务:可将多个不同的应用使用同一个集群服务进行调度. 实现方法: 在Director主机打标记,作用在mangle表的PREROUT ...

  2. 了解Oracle中的Dual系统表

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...

  3. 介绍几种常用的Oracle客户端工具

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...

  4. 程序员天天 CURD,怎么才能成长,职业发展的思考(3)

    公司赚钱流程中,你在哪一个环节 思考你在哪一个环节 在一家提供互联网产品或服务的公司中,开发出产品或提供服务,卖产品卖服务给客户,赚取金钱获得利润,有了利润这家公司就能给员工发工资,公司才能存活下去, ...

  5. Centos7安装openJdk17

    yum 安装 安装 EPEL 软件源:使用以下命令安装 EPEL 软件源,它包含了 OpenJDK 17 的安装包. sudo yum install epel-release sudo yum in ...

  6. C 编程异常 — double free or corruption (fasttop)

    问题:运行代码的时候程序崩溃. *** Error in `./parsing': double free or corruption (fasttop): 0x00000000023d2350 ** ...

  7. [第一届长城杯]-ez-python

    ----这道题似曾相识,和某刃的题目不能说不同,简直就一摸一样 ----考点:pickle序列化问题,命令执行 ----正常访问网站,源代码F12给出?pic=的提示,这种大致一看就是可以任意文件访问 ...

  8. Linux下tail -f,tail -F,tailf的区别

    在Linux中,tail -f ,tail -F,tailf都是用来查看滚动日志的好方法,但是三者之间却有着细微的不同: ​ tail -f 等同于--follow=descriptor,动态显示数据 ...

  9. 5款超好用的AI换脸软件,一键视频直播换脸(附下载链接)

    随着AIGC的火爆,AI换脸技术也被广泛应用于娱乐.广告.电影制作等领域,本期文章系统介绍了市面上超火的5款AI软件 换脸整合包收录了全部5款AI工具,请按照需要选择下载: 百度网盘:https:// ...

  10. 微信小程序,wx.getUserProfile接口将被收回,新的头像获取方式永久保存

    微信文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ 新的获取头像方式:https://developers.weixin. ...