Vue之双向绑定

Vue.js. 是一个渐进式 JavaScript 框架。

我们谈论Vue，首先会说起用它的一个理由：双向绑定。

双向绑定是UI技术中经常会有需求用到的，比如多级联动菜单，实时检验表单等等。

vue的双向绑定怎么使用呢，看如下实例。

<div id="app">

  <div>

    用户名：<input v-model="username">

  </div>

  <div>密码：<input type="password" v-model="password"></div>

  <div><button v-on:click="login">

登陆

</button></div>

  <div>

    {{loginUser}}

  </div>

  <div v-if="loginSuccess">

    登陆成功

  </div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    username: '',

    password: '',

    loginSuccess: false

  },

  computed: {

    loginUser: function() {

      return "username:" + this.username + ", password:" + this.password;

    }

  },

  methods: {

    login: function() {

      if (this.username == 'mayun' && this.password == '123456') {

        this.loginSuccess = true;

      }

    }

  }

})

</script>

这个例子中用到了几个Vue的指令：v-model, v-on:click。
其中v-model就是我们常用的双向绑定指令。
那它简单的实现原理是怎样的呢？
可以用两个指令来代替：

<input v-bind:value="username" v-on:input="onInput">

methods:{
    onInput:function(event){
        this.username = event.target.value;
    }
}

所以，简单来说，v-model实现的双向绑定就是将变量username的值绑定到input的value属性，input输入框的input事件触发时，将输入框的value值赋给username属性。

变量 -> dom -> input事件 -> 变量 -> dom

vue框架做的就是监听变量的改变，然后将改变告知监听该变量的对象。
username变量（Observable 可观察对象）
input输入框（Observer 观察者）