v-model的实现原理:

基础用法:

v-model 本质上不过是语法糖,可以用 v-model 指令在表单 <input><textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

1、text 和 textarea 元素使用 value 属性和 input 事件;

2、checkbox 和 radio 使用 checked 属性和 change 事件;

3、select 字段将 value 作为 prop 并将 change 作为事件。

实现原理

1、v-model只不过是一个语法糖而已,真正的实现靠的还是

1)v-bind:绑定响应式数据

2)触发oninput 事件并传递数据

3)举例如下:

  1. <input v-model="sth" />
  2. // 等同于
  3. <input :value="sth" @input="sth = $event.target.value" /> //自html5开始,input每次输入都会触发oninput事件,所以输入时input的内容会绑定到sth中,于是sth的值就被改变;
  4. //$event 指代当前触发的事件对象;
  5. //$event.target 指代当前触发的事件对象的dom;
  6. //$event.target.value 就是当前dom的value值;
  7. //在@input方法中,value => sth;
  8. //在:value中,sth => value;

总结:数据双向绑定其实就是调用对应组件的事件处理函数来执行实现数据的同步更新;

vue v-model原理实现的更多相关文章

  1. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  2. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  3. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  4. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

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

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

  6. 深入解析vue响应式原理

    摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...

  7. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  8. 深入浅出 - vue变化侦测原理

    废话真多!!! 其实在一年前我已经写过一篇关于 vue响应式原理的文章,但是最近我翻开看看发现讲的内容和我现在心里想的有些不太一样,所以我打算重新写一篇更通俗易懂的文章. 我的目标是能让读者读完我写的 ...

  9. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  10. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

随机推荐

  1. Buy Tickets(poj2828)

    Buy Tickets Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 17416   Accepted: 8646 Desc ...

  2. ORA-14450: 试图访问已经在使用的事务处理临时表

    需要对临时表动态添加列,经常碰到表在事务中被使用的情况,如果可以的话,可以现在只用临时表的时候先truncate,这样可以终止事务对当前临时表的占用. execute immediate('trunc ...

  3. Chapter 4 Effect Modification

    目录 4.1 Definition of effect modification 4.2 Stratification to identify effect modification 4.3 Why ...

  4. Distillation as a Defense to Adversarial Perturbations against Deep Neural Networks

    目录 概 主要内容 算法 一些有趣的指标 鲁棒性定义 合格的抗干扰机制 Nicolas Papernot, Patrick McDaniel, Xi Wu, Somesh Jha, Ananthram ...

  5. k8s env、configmap、secret外部数据加载配置

    K8s提供了多种外部数据注入容器的方式,今天我们主要学习环境变量.ConfigMap以及Secret的使用和配置. 环境变量 在docker项目中,对一个容器添加环境变量可以在容器创建时通过-e EN ...

  6. Sentry 企业级数据安全解决方案 - Relay 监控 & 指标收集

    内容整理自官方文档 系列 Sentry 企业级数据安全解决方案 - Relay 入门 Sentry 企业级数据安全解决方案 - Relay 运行模式 Sentry 企业级数据安全解决方案 - Rela ...

  7. pytest用例的执行顺序

    Pytest执行的顺序 当pytest运行测试函数时,它会查看该测试函数中的参数,然后搜索与这些参数具有相同名称的fixture.一旦pytest找到这些对象,它就会运行这些fixture 影响执行顺 ...

  8. centos7 修改网卡信息

    修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-eth0 有一些不是eth0 也可能是ens33 修改完成后使用下面命令进行重启 systemctl ...

  9. nginx配置指定域名访问,nginx禁止ip访问,配置空主机头 syscal

    1.大家有过这方面的困扰,就是自己的网站给其他人恶意域名解析到自己的服务器ip上. 特别不爽,那大家可以用用空主机头的方法. 先给大家看下我的nginx.conf配置 http { log_forma ...

  10. Java语言学习案例雷霆战机

    1.Java雷霆战机学习笔记(一)-资源加载 https://www.toutiao.com/i6631331313259381255/ 2.Java雷霆战机学习笔记(二)-音乐播放 https:// ...