vue学习笔记3----数据绑定

数据绑定

将model和view绑定起来。例如value="name"，data中的name值发生变化，输入框中的值也会发生变化。

 

 

单向数据绑定与双向数据绑定

vue中有2种数据绑定的方式：

1. 单向数据绑定（v-bind）：数据只能从data流向页面；
2. 双向数据绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data；

备注：

• 双向数据绑定一般都应用在表单类（输入类）元素上 （如：input、select等，有value属性的）；
• v-model：value 可以简写为 v-model，因为v-model默认收集的就是value的值；

单向数据绑定：就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了；

双向数据绑定：在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了

  

 

代码示例

    

        单向数据绑定：

        双向数据绑定：


        

        
简写
        
        单向数据绑定：

        双向数据绑定：

    

    

如上代码段中，若对双向绑定的输入框修改数据，单向绑定的输入框也会改变，所有输入框显示内容都一样。

双向数据绑定的输入框中内容改变，导致data中name值改变，name值的改变导致单向绑定输入框的显示内容改变，一个连锁反应。

参考vue单向数据绑定和双向数据绑定_菜鸟上道 请多指教的博客-CSDN博客_vue单向绑定