快捷搜索: 王者荣耀 脱发

Vue中的单向数据绑定和双向数据绑定到底是什么

接触过vue的人,肯定听过这样的说法:

v-bind是单向数据绑定 v-model是双向数据绑定 数据是动态展示在页面上的

初识Vue的人可能是和我一样懵逼的,因为之前的前端开发和前端框架,并没有提到这种说法

下面就这两种数据绑定的形式,说一下我个人的理解

v-bind

简写是一个冒号,是一种单向的数据绑定方式,常常作用在标签属性上,实现为标签属性动态赋值的作用

这种改变是单向的,是不可逆的

数据动态的赋值给标签属性之后,标签属性的值是不能反向作用于数据,从而使数据改变的

v-model

是一种双向数据绑定的方式,只能作用于表单元素。

那表单元素是什么呢?通俗来讲,表单元素就是可以与用户交互,用户可以输入或者选择值的标签,

比如,单选复选,下拉类表,输入框等

数据可以动态赋值给表单元素

在赋值的过程中,数据首先会存入vue中的data对象中,然后data对象中的值再赋值给表单元素

如果表单元素修改了默认的赋值,那么修改后的数据也会更新至data对象中

简单来说,表单输入值可以赋值给data,data中的值也可以动态赋值表单元素

冷知识:我以为双向数据绑定会直接改变我代码中的数据,所以一直搞不明白 原来是把数据交给了vue去管理,这也属于vue中存在的数据代理,有兴趣的小伙伴可以去了解一下什么是数据代理

经验分享 程序员 微信小程序 职场和发展