Vue神器！数据界面默契合作，犹如电视遥控器掌控屏幕

说起MVVM模式，其实就是设计软件架构的一招儿。就是把数据跟界面捆绑在一起，然后用中间那层来处理他们之间的步伐对不上的情况。来看这个例子，假设模型是咱们想要显摆的那些数据，视图就是咱们看起来亮堂堂的网页，而ViewModel这个角色啦就像个翻译，把他们两个的话给通个气儿。

这个MVVM，就是说你的数据和界面要搭配好，就像是看电视换台一样，需要一个遥控器去控制，这样比喻的话，数据就是遥控器，View则是电视机屏幕，它们俩必须默契合作哟。

Vue这玩意儿就是个快捷好用的双向数据绑定工具，弄起来就像玩儿一样，只要改动一下数据，网站的内容立马就变了。比如说你把v-model指令指向的数据和表单元素一搭对儿，然后在输入框里随便儿敲俩字，关联的数据立马就更新！

Vue真的很厉害，是因为它里面有个神奇的东西叫虚拟DOM，可以让我们的页面瞬间更新。只要数据发生变化，他就会马上把虚拟DOM跟现有的真实脚本对比，找出来需要修改的地方，就不用再全部刷新遍整个网页了，超级快捷又方便！大家用过以后都觉得特别爽，给力！

别小看Vue了，它还会用应对复杂业务和监测数据的神奇技能——计算属性（Computed）跟监听器（Watcher）！简单来说，它们能帮我们处理棘手的业务逻辑，同时在数据发生变化时立马进行响应动作——就像有个隐形人时刻盯着我们的数据，随时准备行动一样，够酷？

客户想要点个按钮，数据就变？用MVVM模式就能简单实现。比如，添加个操作客户点了之后自动执行，然后根据业务规则让数值加减增加或减少～

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

听说过MVVM吗？它最厉害的地方就把数据处理和界面分离开。ViewModel根本不在乎是哪个View在用，所以所有View都能用这招儿。这么干的话，改起代码来方便多了，扩展功能也轻松搞定！

watch: {
  message: function(newVal, oldVal) {
    console.log('message的值发生了变化');
  }
}

说实话，MVVM真是给力的伙伴。屏幕上的变化，立马替换掉相关数据，而且反过来也行。有了Vue帮忙，不管是操作DOM还是写代码都简单多了！

点击增加