Vue学习笔记(十三) 响应式原理
1、外在表现 响应式系统是 Vue 的核心特性之一,它的实质其实就是 当数据模型发生变化时,视图将会自动更新 这样可以避免开发人员直接操作 DOM,大大降低开发难度,这也是 Vue 提倡 数据驱动 的原因,我们看一个例子 <!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <div>Counter: {{ counter }}</div><br/> <button v-on:click="increase">Increase</button> <button v-on:click="decrease">Decrease</button> </div> <script> new Vue({ el: '#app', data: { counter: 0 }, methods: { increase: function() { this.counter += 1 }, decrease: function() { this.counter -= 1 } } }) </script> </body> </html> 当我们点击按钮调用方法时,会使得数据 counter