vuejs双向数据绑定

vuejs 双向绑定给我们开发带来了很大的方便,主要用在表单中,通过v-model指令实现。

那么什么是双向数据绑定?下面这张图可以很好的说明:

vuejs双向数据绑定_第1张图片

绑定的双方:view层的DOM和Model层的javascript对象。

第一层绑定:将javascript对象数据通过vuejs实现的规则绑定到DOM中。上代码:

vuejs双向数据绑定_第2张图片

vuejs双向数据绑定_第3张图片

这是从JavaScript对象向DOM绑定,即通过vm实例的data对象向

段落内容绑定。

第二层绑定:操作表单(比如在表单中输入内容),将输入的表单内容通过监听器实时同步到javascript对象数据中,然后再通过数据绑定规则绑定到DOM(这里是

段落,也即

段落内容数据根据input输入内容实时刷新保持一致)中。实现这一过程,只需要加上v-model指令即可,将表单内容实时同步到

段落内容中。


{{objData}}

运行一下:

vuejs双向数据绑定_第4张图片

这个过程是从DOM向JavaScript对象绑定,然后再将javascript对象数据绑定到对应的DOM中。这就是双向数据绑定。

 

你可能感兴趣的:(vuejs)