vue v-model原理实现
v-model的实现原理:
基础用法:
v-model
本质上不过是语法糖,可以用 v-model 指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 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原理实现的更多相关文章
- Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串
本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- 深入解析vue响应式原理
摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- 深入浅出 - vue变化侦测原理
废话真多!!! 其实在一年前我已经写过一篇关于 vue响应式原理的文章,但是最近我翻开看看发现讲的内容和我现在心里想的有些不太一样,所以我打算重新写一篇更通俗易懂的文章. 我的目标是能让读者读完我写的 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
随机推荐
- 1145 - Dice (I)
1145 - Dice (I) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB You hav ...
- TensorFlow.NET机器学习入门【4】采用神经网络处理分类问题
上一篇文章我们介绍了通过神经网络来处理一个非线性回归的问题,这次我们将采用神经网络来处理一个多元分类的问题. 这次我们解决这样一个问题:输入一个人的身高和体重的数据,程序判断出这个人的身材状况,一共三 ...
- CS5211替代兼容PS8625|普瑞PS8625替代方案|CapstoneCS5211
PS8625是一个DP显示端口 到LVDS转换器芯片,利用GPU和显示端口(DP) 或嵌入式显示端口(eDP) 输出和接受LVDS输入的显示面板.PS8625实现双通道DP输入,双链路LVDS输出.P ...
- Java工程编码格式由GBK转化成utf-8(编码格式互转)
在写项目的过程中我发现有的地方编码格式被设置成了 gbk 如果用eclipse等工具直接改回utf-8编码格式则会出现乱码. 下载:https://download.csdn.net/download ...
- Java初学者作业——编写Java程序,输入一个数字,实现该数字阶乘的计算。
返回本章节 返回作业目录 需求说明: 编写Java程序,输入一个数字,实现该数字阶乘的计算.一个数字的阶乘是所有小于及等于该数的正整数的积,自然数n的阶乘写作n! .例如,5的阶乘等于1*2*3*4* ...
- Java初学者作业——编写 Java 程序,定义 Employee 类以及 HR 类,实现 HR 为 Employee 加薪的功能。
返回本章节 返回作业目录 需求说明: 编写 Java 程序,定义 Employee 类以及 HR 类,实现 HR 为 Employee 加薪的功能. 实现思路: 定义 Employee 类,并定义属性 ...
- ElasticSearch、Kibana 介绍&安装
目录 ElasticSearch 介绍 基于数据库查询的问题 倒排(反向)索引 ES 存储和查询的原理 ES 核心概念 ES 安装 Kibana ElasticSearch 介绍 基于数据库查询的问题 ...
- Python 利用@property装饰器和property()方法将一个方法变成属性调用
在创建实例属性时,如果直接把实例属性暴露出去,虽然写起来简单,但是存在一些风险,比如实例属性可以在外部被修改. 为了限制外部操作,可以通过一个set_score()方法来设置成绩,再通过一个get_s ...
- Limiting Command Size
Next: Controlling Parallelism, Previous: Unusual Characters in File Names, Up: Multiple Files [Conte ...
- spring cloud --- config 配置中心 [本地、git获取配置文件]
spring boot 1.5.9.RELEASE spring cloud Dalston.SR1 1.前言 spring cloud config 配置中心是什么? 为了统一管理配 ...