vue中v-model可以实现数据的双向绑定,但是为什么这个指令就可以实现数据的双向绑定呢?

其实v-model是vue的一个语法糖。即利用v-model绑定数据后,既绑定了数据,又添加了一个input事件监听。

实现原理:

1、v-bind绑定响应数据

2、触发input事件并传递数据

简单案例:

<input v-model="text"></input>
// 等价于:
<input :value="text" @input="text = $event.target.value"></input>
// 组件中使用:
<custom-input :value="text" @input="$event"></custom-input>
// 根据v-model原理模拟:
<input type="text" id="ipt1">
<input type="text" id="ipt2">
<script>
var ipt1=document.getElementById('ipt1');
var ipt2=document.getElementById('ipt2');
ipt1.addEventListener("input",function(){
ipt2.value=ipt1.value;
})
</script>

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

  1. 2. Attention Is All You Need(Transformer)算法原理解析

    1. 语言模型 2. Attention Is All You Need(Transformer)算法原理解析 3. ELMo算法原理解析 4. OpenAI GPT算法原理解析 5. BERT算法原 ...

  2. 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现

    本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...

  3. Android中插件开发篇之----应用换肤原理解析

    一.前言 今天又到周末了,感觉时间过的很快呀.又要写blog了.那么今天就来看看应用的换肤原理解析.在之前的一篇博客中我说道了Android中的插件开发篇的基础:类加载器的相关知识.没看过的同学可以转 ...

  4. (转)HashMap深入原理解析

    [HashMap]深入原理解析 分类: 数据结构 自考 equals与“==”(可以参考自己的另一篇博文) 1,基本数据类型(byte,short,char,int,long,float,double ...

  5. 【转】C# URL短地址压缩算法及短网址原理解析

    这篇文章主要介绍了C# URL短地址压缩算法及短网址原理解析,本文重点给出了算法代码,需要的朋友可以参考下 短网址应用已经在全国各大微博上开始流行了起来.例如QQ微博的url.cn,新郎的sinaur ...

  6. ThreadLocal系列(二)-InheritableThreadLocal的使用及原理解析

    ThreadLocal系列之InheritableThreadLocal的使用及原理解析(源码基于java8) 上一篇:ThreadLocal系列(一)-ThreadLocal的使用及原理解析 下一篇 ...

  7. ThreadLocal系列(一)-ThreadLocal的使用及原理解析

    ThreadLocal系列之ThreadLocal(源码基于java8) 项目中我们如果想要某个对象在程序运行中的任意位置获取到,就需要借助ThreadLocal来实现,这个对象称作线程的本地变量,下 ...

  8. [置顶] 滴滴插件化框架VirtualAPK原理解析(一)之插件Activity管理

    上周末,滴滴与360都开源了各自的插件化框架,VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者,在周末就迫不及待的下载了Virtualapk框架来进行研究,本篇博客带来的是Vir ...

  9. Flask 上下文(Context)原理解析

    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...

  10. android黑科技系列——微信抢红包插件原理解析和开发实现

    一.前言 自从几年前微信添加抢红包的功能,微信的电商之旅算是正式开始正式火爆起来.但是作为Android开发者来说,我们在抢红包的同时意识到了很多问题,就是手动去抢红包的速度慢了,当然这些有很多原因导 ...

随机推荐

  1. 日常工作问题解决:Redhat6.5--解决yum无法正常安装配置问题

    1.问题描述 解决RedHat6.5下yum功能不能用问题: 在redhat6.5下使用yum安装时,会提示:This system is not registered to Red Hat Subs ...

  2. 通过 Spring Session 实现新一代的 Session 管理

    长期以来,session 管理就是企业级 Java 中的一部分,以致于我们潜意识就认为它是已经解决的问题,在最近的记忆中,我们没有看到这个领域有很大的革新. 但是,现代的趋势是微服务以及可水平扩展的原 ...

  3. Word 英语单词前面的汉字间距变大、Word 英文断词

    1. 前言 在写文档时,在用word穿插敲汉字和英语时,会出现英语单词前面的汉字间的间距突然变大的情况,如何解决? 2. 步骤 1.选中间隙变大的段落,然后右键点击段落 2.然后点击中文版式,把允许西 ...

  4. 剑指offer56:删除链表中重复的结点,排序的链表中,删除重复的结点不保留,返回链表头指针。 例如,链表1->2->3->3->4->4->5 处理后为 1->2->5

    1 题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处 ...

  5. 20191011-构建我们公司自己的自动化接口测试框架-Util的读取excel常用方法模块

    包括获取excel的sheet名字,设定excel的sheet,读excel,写excel等常规操作. from openpyxl import Workbook from openpyxl impo ...

  6. 串口控制RGB灯程序

    实验目的: 通过上位机给串口发送数据(字符); STM32收到数据进入中断程序原封不动返回上位机,并且根据收到的信息产出相应的进行操作.(1- led_on  2 – ledoff...); 源码   ...

  7. redis mongodb持久化的方式

    目录 redis持久化方式(两种) RDB持久化 AOF持久化 两种持续化方式需要明确的问题 对比 MongoDB持久化方式 redis持久化方式(两种) RDB持久化 redis提供了RDB持久化的 ...

  8. Mac电脑配置相关及软件工具安装推荐

    iTerm2(https://www.iterm2.com/) 终端工具 Alfred(http://xclient.info/s/alfred.html) 快速启动器 WebStorm.VSCode ...

  9. CentOS7 服务器连接超时自动断开问题解决

    背景 现在的客户们都开始使用云服务器了,还要通过堡垒机才给访问权限,这种方式访问方式以前都是银行的"专利",不过也间接说明其他行业的信息化也越来越普及了.今天主要是因为分配给我的这 ...

  10. (三)springmvc之注解的基本使用

    一.@Controller @Controller 标记一个类是Controller 二.RequestMapping  地址映射 2.1 Value的操作. 注解在类上面    (父)       ...