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)举例如下:

<input v-model="sth" />
// 等同于
<input :value="sth" @input="sth = $event.target.value" /> //自html5开始,input每次输入都会触发oninput事件,所以输入时input的内容会绑定到sth中,于是sth的值就被改变;
//$event 指代当前触发的事件对象;
//$event.target 指代当前触发的事件对象的dom;
//$event.target.value 就是当前dom的value值;
//在@input方法中,value => sth;
//在: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. 教学日志:javaSE-面向对象1

    对象,类,属性,方法的理解 package com.tengxun.class6.oop1; /** * @Auther: Yu Panpan * @Date: 2021/12/7 - 12 - 07 ...

  2. idea使用教程-模板的使用

    一.代码模板是什么 它的原理就是配置一些常用代码字母缩写,在输入简写时可以出现你预定义的固定模式的代码,使得开发效率大大提高,同时也可以增加个性化.最简单的例子就是在Java中输入sout会出现Sys ...

  3. MySQL中写操作

    具体到操作流程: 当执行某个写操作的 SQL 时,引擎将这行数据更新到内存的同时把对应的操作记录到 redo log 里面,然后处于 prepare 状态.并把完成信息告知给执行器. 执行器生成对应操 ...

  4. 标准基座获取定位可以获取address城市,自定义基座获取不到address

    正常的返回应该 { "type": "WGS84", "altitude": 0, "latitude": 31.830 ...

  5. elementUI表单嵌套表格并对每行进行校验

    elementUI表单嵌套表格并对每行进行校验 elementUI 表单嵌套表格并进行校验. 目录 效果展示 代码链接 关键代码 完整代码 效果展示 先看看这是不是需要的效果^_^ ​ 如图,Elem ...

  6. CS5218替代AG6310方案|设计DP转HDMI转换方案|替代AG6310方案

    AG6310是一款实现显示端DP口转HDMI数据转换器.AG6310是一款单芯片解决方案,通过DP端口连接器传输视频和音频流,其DP1.2支持可配置的1.2和4通道,分别为1.62Gbps.2.7Gb ...

  7. <数据结构>XDOJ314.完全二叉树的子树

    问题与解答 问题描述 对一棵完全二叉树,采用自上而下.自左往右的方式从1开始编号,我们已知这个二叉树的最后一个结点是n,现在的问题是结点m所在的子树一共包括多少个结点? 输入格式 输入数据包括多行,每 ...

  8. Java程序设计基础笔记 • 【第6章 循环结构进阶】

    全部章节   >>>> 本章目录 6.1 for循环 6.1.1 for循环的简介 6.1.2 for循环的使用 6.1.3 for循环的表达式 6.1.4 实践练习 6.2 ...

  9. MySQL测试题——开发公司人事管理系统,包括 Employee表 和 Department表

    一.需求分析 我们的开发团队,计划开发一款公司人事管理软件,用于帮助中小型企业进行更加高效的人事管理.现在需要对数据库部分进行设计和开发,根据对需求和立项的分析,我们确定该数据库中最核心的两个表为员工 ...

  10. 《MySQL5.7从入门到精通》(高清).PDF,免费无需任何解压密码

    链接:https://pan.baidu.com/s/1nnm5IbExaBhjL6-7qR1Oxw 提取码:vzpx