深入了解Vue中双向数据绑定原理

数据的变化反应到视图

前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的

命令式操作视图

目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部

声明式操作视图

目标:我们将data中name属性的值作为文本渲染到标记了v-text的p标签内部,在vue中,我们把这种标记式的声明式渲染叫做指令

小结

不管是指令也好,插值表达式也好,这些都是将数据反应到视图的标记而已,通过标记我们可以把数据的变化响应式的反应到对应的dom位置上去
找标记,把数据绑定到dom的过程,我们称之为binding

视图的变化反应到数据

目标:将data中的message属性对应的值渲染到input上面,同时input值发生修改之后,可以反向修改message的值,在vue系统中,v-model指令就是干这个事情的,下面我们就实现一下v-model的功能

现存的问题

无法做到精准更新

以上就是深入了解Vue中双向数据绑定原理的详细内容,更多关于Vue双向数据绑定的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(深入了解Vue中双向数据绑定原理)