Vue前端框架——单向数据绑定与双向数据绑定

▲单向数据绑定与双向数据绑定示意图

在 Vue 中，单向数据绑定和双向数据绑定是由两个不同的指令来完成的，分别是 v-bind指令（单向）和 v-model指令（双向）。

v-bind 指令相较于 v-model 指令大多数情况下在程序中出现次数较为频繁，因为 v-bind 指令经常用在除表单元素之外的 DOM 元素中（表单元素中也能用，就是效果不好），而 v-model 指令只能用在表单元素中，所 v-bind 指令的应用面更广一些。

接下来我会通过代码 + 浏览器 + 浏览器控制台来演示数据的单向绑定与双向绑定。为了能够更直观的看到双向数据绑定与单项数据绑定的不同，在后续代码中会使用表单类元素中的 input 元素 作为主要演示对象。

下面的程序中，在 id 为 root 的容器里使用了两个 input 元素，并且分别使用 v-bind 和 v-model 指令为 input 元素绑定数据。

    
    
    
    


    
    

        姓名：(v-bind)
        

        姓名：(v-model)
    

    

打开浏览器查看运行结果，同时打开控制台并切换到 Vue 开发者工具，可以看到在 Vue 实例中定义的具体数据。

 Part1 单向数据绑定

单向数据绑定在 Vue 中是指数据只能从 data 流向页面，通常使用 v-bind 指令对 DOM 元素进行单向的数据绑定。 

    姓名：(v-bind单向数据绑定)

 

上面的代码运行后结果正常显示在浏览器中并且没有任何报错，data 中的 name 属性值也成功的解析在 input 框中。此时的界面从表面看起来一切都是风平浪静的样子，没有任何不妥。

看下面这俩张图，现在我将输入框中原来的 " 张三 " 改成了 " 张三12345 "，虽然页面中是这样显示了，但是在 Vue 开发者工具中 data 的 name 属性的值并没有改变，这也就解释了单向数据绑定数据只能从 data 流向页面。

 此时无论你在输入框中输入什么，data 中 name 的值都是不会改变的。是因为 Vue 发现input元素是用 v-bind 指令绑定的数据，所以 Vue 只监听 data 中的数据有没有改变，如果 data 中 name 属性的值改变了，那么页面中输入框里的值也会随之改变，相反由于 Vue 并不会去监听输入框中的数据是什么样的，所以在输入框中改变数据并不会引起 data 中数据的改变。

 Part2 双向数据绑定

双向数据绑定在 Vue 中是指数据不仅能从 data 流向页面，还能从页面流向 data。必须使用 v-model 指令来对 DOM 元素进行双向数据绑定。 

    姓名：(v-model双向数据绑定)

 

在最初运行程序时，能看出来双向数据绑定与单向数据绑定的运行结果没有区别。这也正是最容易误导初学者的一个问题。

看下面这两张图，现在我将输入框中原数据 " 张三 " 改成了 " 张三12345 "，可以看到输入框中的数据改变了，data 中 name 属性的值也随之改变了。其实这也就解释了双向数据绑定数据不仅能从 data 流向页面，还能从页面流向 data 。

因为 v-model 指令在 Vue 中主要是用来获取表单类元素数据的，所以 v-model 指令可以监听页面中用户所输入的数据然后传递给 data ，从而实现表单类元素与 data 中属性之间的双向数据绑定。

看图片可能不那么直观，大家自己在练习的时候可以搭配着 Vue 开发者工具进行操作，可以更直观的看到在输入框输入完数据后，data 中 name 属性的值会实时跟着变化。

Part3 在合适的时候使用v-model指令 

虽然 v-bind 指令能够在表单类元素中使用，但是在使用 v-model 指令的时候要注意，非表单类元素不能使用 v-model 指令来绑定数据，否则会报错。 

    姓名：(v-model双向数据绑定)
    
    点击前往百度

 

从页面结果可以看出不仅 " 点击前往百度 " 这几个字没有链接效果，且控制台还报错了。主要是说模板构建失败，v-model 这个指令不支持在这个类型的元素上使用，也就是不支持在 a 元素 上使用。

所以大家在以后的学习或实际开发中一定要注意非表单类元素一定不要用 v-model 指令来绑定数据，否则就会出现和上图一样的错误。表单类元素指的是像 input、 select 等用户可以进行输入或操作的元素。

Part4 总结 

1. 单向数据绑定：数据只能从 data 流向页面。

2.  双向数据绑定：数据不仅能从 data 流向页面，还能从页面流向 data。

3. 双向绑定一般都应用在表单类元素上（如：input、select等）