Vue.jsノートのリスニングプロパティ

watchでデータの変化に応答できます.

<div id = "computed_props">
      : <input type = "text" v-model = "kilometers">
      : <input type = "text" v-model = "meters">
div>
<p id="info">p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = val * 1000;
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch  
    vm.$watch('kilometers', function (newValue, oldValue) {
    //   vm.kilometers  
    document.getElementById ("info").innerHTML = " : " + oldValue + "， : " + newValue;
})
script>

以上のコードでは、2つの入力ボックスを作成しました.dataプロパティでは、kilometersとmetersの初期値は0です.watchオブジェクトはkilometersとmetersの2つのメソッドを作成します.
ボックスにデータを入力すると、watchはデータの変化をリアルタイムで傍受し、自分の値を変更します.