03_数据绑定

日常小技巧/注意项记录

• 换行：

前言

我们在之前其实就已经利用 “ v-bind ” 做过了数据绑定的操作：

但是今天的数据绑定和之前 v-bind 的绑定还是有所不同的，会比它更加的高级。

单向数据绑定

之前我们所使用的利用 v-bind 进行数据绑定的方式其实就是单向数据绑定，这也是利用 v-bind 进行绑定的特点之一。

<div id="root">
        单向数据绑定:<input type="text" v-bind:value="name"><br/>
    </div>

我们可以看到当我们修改我们存放在name变量中的数据的时候，输入框中的内容会跟随着变量内容的改变而改变，而当我们修改输入框的内容时，name变量中的值却并不会发生改变，这就是 v-bind 的单向数据绑定：

双向数据绑定

数据双向绑定顾名思义就是我们的数据不仅可以通过更改输入框来修改对应变量中的内容，也可以通过更改变量的内容来控制输入框中内容的改变。这时我们就需要用到另一种方式 —— v-model 。

  <div id="root">
        双向数据绑定:<input type="text" v-model:value="name">
    </div>

值得一提的是由于 v-model 是双向数据传递因此它只能运用在表单类元素（输入类元素上），不然就会出现报错。

总结

Vue中有2种数据绑定的方式:
    1.单向绑定(v-bind):数据只能从data流向页面。
    2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
    备注:
        1.双向绑定一般都应用在表单类元素上(如:input、select等)。
        2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。