[Day 5] Vue的数据与方法

昨天简单介绍了Vue的 响应式，关於响应式的基本介绍可以直接看昨天那篇，这边就不再赘述(╹ڡ╹ )。今天又会再提到一次，只是难度很稍微的加深了，虽然想加一些字让我的版面看起来很丰富，但是我实在没什麽好说的，就直接开始吧!!

开始罗

虽然Vue没有完全遵循MVVM模型，但是也受到了它的启发，所以常常用vm(ViewModel缩写)这个变量名表示Vue instance(实例、实体)，这边就是使用vm。
先来看看一个例子，再从例子里面分析各种观念!!

和昨天的例子相比，发现今天的例子在new Vue之前就先创了一个变量data，特别注意一下Vue面的两个data是不一样的，左边的data是Vue里面的property(属性)而右边就是var定义的全新变量。
放上昨天的范例来比较一下

更改数据

接着来演示一下响应式，我们先更改data，把a从原本的1更改成”略略”
像以下这样，可以发现html很正常的也更新了数据

我们换更改vm的a属性，改成”颗颗”，像这样

竟然发现和刚刚跟改data.a的结果一模一样!!由此可见data.a == vm.a式成立的。

声明属性

打铁趁热，我们在HTML新增一个b属性，发现不管事更改data.b或是vm.b都不会有任何的反应，因为我们从一开始就没有声明b这个东东，必须提前声明才可以。
如果你知道你之後会用上一个属性，但是它在一开始为空值或不存在，这时候只需要预设一些初始值就好了，像这样

今天就到这里结束!!不知道各位会不会想念我画的图(。・∀・)ノ，有机会我会再画的，敬请期待~(根本没人想看)