双向绑定

双向绑定这个概念现在越来越普及。

在Angular出现的时候,就作为宣传的王牌概念. 现在几乎是个js前端框架,就有这个功能. 它的概念是:

某个变量，定义于 <script/>, 需要展现在 <template/>中的话:

  1. 如果在代码层面进行修改, 那么页面的值就会发生变化
  2. 如果在页面进行修改(例如在input标签中), 那么代码的值就会发生变化.

一个演示例子.

在我们的项目中,增加一个 vue页面: src/components/TwoWayBinding.vue

  1. <template>
  2.   <div>
  3.     <!-- 显示　this.my_value 这个变量 -->
  4.     <p>页面上的值:  {{my_value}} </p>
  6.     <p> 通过视图层，修改my_value: </p>
  7.     <input v-model="my_value" style='width: 400px'/>
  9.     <hr/>
  10.     <input type='button' @click="change_my_value_by_code()" value='通过控制代码修改my_value'/>
  11.     <hr/>
  12.     <input type='button' @click="show_my_value()" value='显示代码中的my_value'/>
  13.   </div>
  14. </template>
  16. <script>
  17. export default {
  18.   data () {
  19.     return {
  20.       my_value: '默认值',
  21.     }
  22.   },
  23.   methods: {
  24.     show_my_value: function(){
  25.       alert('my_value: ' + this.my_value);
  26.     },
  27.     change_my_value_by_code: function(){
  28.       this.my_value += ",  在代码中做修改, 666."
  29.     }
  30.   }
  31. }
  32. </script>

上面的代码中， 显示定义了一个 变量 “my_value”， 这个变量可以在 <script/>中访问和修改，也可以在 <template/>中访问和修改。

  • 在代码(<script/>) 中访问的话，就是 this.my_value
  • 在视图(<template/>)中访问的话，就是 <input v-model=my_value />

所以，这个就是双向绑定的方法。

接下来,修改路由文件: src/router/index.js:

  1. import TwoWayBinding from '@/components/TwoWayBinding'
  3. export default new Router({
  4.   routes: [
  5.     {
  6.       path: '/two_way_binding',
  7.       name: 'TwoWayBinding',
  8.       component: TwoWayBinding
  9.     }
  10.   ]
  11. })

然后, 就可以用浏览器访问路径:　http://localhost:8080/#/two_way_binding

效果１：通过页面，修改js代码的值，可以看到，代码中的my_value一边， 视图中的my_value 就发生变化。

如下图所示：

双向绑定的效果: 页面修改代码

效果２：通过代码层面的改动，影响页面的值.

如下图所示：

通过代码层面的改动，影响页面的值

所以，这个特性是Vuejs自带的。我们不需要刻意学它，只需要知道它可以达到这个目的，具备这个特性，就可以了。

以后我们会发现，Vuejs 等前端框架中，这种思想和现象特别常用。