今日完成

Vue.js 响应接口

Vue 可以添加数据动态响应接口。

通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。

实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。

<div id = "app">

    <p style = "font-size:25px;">计数器: {{ counter }}</p>

    <button @click = "counter++" style = "font-size:25px;">点我</button>

</div>

<script type = "text/javascript">

var vm = new Vue({

    el: '#app',

    data: {

        counter: 1

    }

});

vm.$watch('counter', function(nval, oval) {

    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

});

setTimeout(

    function(){

        vm.counter += 20;

    },10000

);

</script>

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。

Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。

如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。

Vue.set

Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：

Vue.set( target, key, value )target: 可以是对象或数组

key : 可以是字符串或数字

value: 可以是任何类型

<div id = "app">

   <p style = "font-size:25px;">计数器: {{ products.id }}</p>

   <button @click = "products.id++" style = "font-size:25px;">点我</button>

</div>

<script type = "text/javascript">

var myproduct = {"id":1, name:"book", "price":"20.00"};

var vm = new Vue({

   el: '#app',

   data: {

      products: myproduct

   }

});

vm.products.qty = "1";

console.log(vm);

vm.$watch('products.id', function(nval, oval) {

   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

});

</script>

使用以下代码在开始时创建了一个变量 myproduct：

var myproduct = {"id":1, name:"book", "price":"20.00"};

该变量在赋值给了 Vue 实例的 data 对象：

var vm = new Vue({ el: '#app', data: { products: myproduct } });