美文网首页
双绑原理

双绑原理

作者: key君 | 来源:发表于2019-10-18 09:39 被阅读0次

what:
双绑是数据和视图相互作用,表现为v-model指令,实际是语法糖。
why:
使用方便快捷
where:
表单控件或自定义组件
how:
v-model = "model"
实现原理:
编译和解析两部分
v-model编译为事件和赋值两部分

原生v-model 编译阶段得到domProps和on
patch(创建元素)时再解析为事件监听(event.js)和value(domProps.js)赋值
PS:type不同结果不同

domProps:{'value': (foo)},
on:{
"input":function($event){
      foo=$event.target.value
  }
}

自定义组件v-model
创建组件时,处理model,最终还是转化为on属性 组件实例构建initEvent时监听事件,先创建组件实例才能监听和派发事件

model:{
  callback:..
}

相关文章

  • 双绑原理

    what:双绑是数据和视图相互作用,表现为v-model指令,实际是语法糖。why:使用方便快捷where:表单控...

  • 2020-07-03 vue双绑原理

    mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来...

  • 通过RAC实现双绑

    理解MVVM View由MVC中view和controller组成,负责UI的展示,绑定viewmodel中的属性...

  • 天真对套路

    同事中有位很会绑头的,特别是给小孩子绑,一双巧手令家有女宝宝的辣妈们艳羡不已,也常找同事给自家孩子绑个美...

  • 浅谈v-model双向绑定

    vue的响应式原理是实现了数据->视图,接下来我们要学习 视图->数据的原理。 v-model用于表单数据的双向绑...

  • MOCTF-crypto

    就是这个feel!! 题目:恰恰 恰恰恰 恰绑恰绑 恰 绑绑恰绑{恰恰绑 恰恰恰 恰恰恰 恰绑绑} 看到只有恰 绑...

  • 2020-02-24手机多摄像头原理解析

    【图吧小白教程】双摄基本原理 手机双摄像头的原理讲解(咕) 现在手机都四摄了,双摄没意思 简单讲讲手机双摄像的发展...

  • 雨中所见

    白发老妇不简单 布鞋也敢雨中转 脚绑一双塑料袋 干干爽爽不花钱

  • Feign Client 原理和使用

    本文作者:sytyale,另外一个聪明好学的同事 一、原理 Feign 是一个 Java 到 HTTP 的客户端绑...

  • Vue高级--双向绑定原理

    1.原理 vue数据双向绑 定是通过数据劫持结合发布者-订阅者模式的方式,通过 **Object.defineP...

网友评论

      本文标题:双绑原理

      本文链接:https://www.haomeiwen.com/subject/xqabmctx.html