前言

Vue是前端开发大牛必备的神器，也是目前最火热的JavaScript 框架。作为一名前端开发工程师，如果掌握了Vue的精髓，不仅写起代码来得心应手，也能为你的升职涨薪加分。下面来看看Vue的精髓之一数据绑定。

前端开发通俗来讲就做两件事：一件就是将界面做到极致，说白了就是高还原度的还原UI设计师的UI设计；第二件就是让界面有血有肉，这个血肉就是将数据通过一定的逻辑渲染出来。

Vue的数据绑定就是造血肉的，有两种用法：一种是单向数据绑定，一种是双向数据绑定。

单向数据绑定

单向数据绑定很好理解，就是将后端开发的接口所返回的数据按照一定的规则显示在界面上。

下面通过一个具体的实例来看看Vue是如何将数据显示在页面上：

<div id="demo">
Vue 当前的版本是：{{version}}
</div>      

上面的这段代码要实现的效果是：在页面上显示“Vue 当前的版本是：2.1” ，那么2.1 就是需要绑定该页面的数据。在Vue的语法中可以通过模板语法“{{}}”，将需要绑定的数据通过模板语法“{{version}}”来表示，变量version，就是动态显示的版本号。接下来要做的就是这个version变量的赋值，以下就是JS部分的代码：

var demo = new Vue({
  el: '#demo',
  data: {
    version: '2.1'
  }
})

这段代码很简洁，通过定义一个Vue 对象，通过“el”属性对应上面的DOM元素的id，data属性则是以JSON对象的方式，定义了version这个属性的值为2.1，点这个值发生改变时，则页面展示Vue 当前的版本是：XXX,也会随之改变，这就完成了将数据绑定到页面的单向绑定。

双向数据绑定

双向绑定从字面上理解，不难看出界面和数据之间的影响是双向的。

如何深入理解双向绑定呢？这里面先引入模型的概念，和MVC开发模式中的M，也即Model，它是用于实体数据的表示。

双向绑定就是指页面与数据模型Model之间相互影响，当页面发生变化时，与页面绑定的Model也会发生改变；当Model改变时，页面绑定的该Model的元素也会随之改变。双向绑定最典型的应用场景就是表单的应用。通过下面的代码来看看双向数据绑定的应用：

<div id="loginView">
  	<input type="text" v-model="Mobile" placeholder="请输入手机号码" />
     <input type="text" v-model="Pwd" placeholder="请输入密码" password="true" />
       <button   @click="submitLogin">登录</button>
 </div>

上面是一段简单的登录界面，在点击“登录”按钮时，需要获取 输入的“手机号码”和“密码”，那么在Vue 中如何实现呢？

首先分别为手机号和密码定义Model，这是通过上面 v-model 来完成；然后就需要完成从页面元素到Model的影响：输入不同的手机号，Model的值也会随之改变。 通过以下部分JS代码来看看：

var loginView = new Vue({
  el: '#loginView',
  data: {
    Mobile: '',
    Pwd:''
  }
})

以上代码中data对象的两个属性"Mobile"和"Pwd"就代表了输入的手机号和密码的值。整个代码完成了页面元素到Model的绑定，那么这个绑定是如何实现呢？这就是上面讲到的单向绑定的过程了，将JS代码小改一下看看：

var loginView = new Vue({
  el: '#loginView',
  data: {
    Mobile: '',
    Pwd:'123456'
  }
})

当给“Pwd”属性赋值时，输入框就有值了，默认并不是空。到这里双向绑定就完全完成了。

总结

数据绑定概括来讲就是页面元素与定义的数据Model之间的相互赋值，用于渲染页面元素或是获取页面元素的值。

大家不妨结合上面的代码，动手试一试，应该可以完全理解。

更多web开发知识，欢迎关注“lelingtech的AI之路”