## 三权分立

![vue-style.jpg](https://cdn.steemitimages.com/DQmP6uoBmWYJyGhi5BsoG67TybZijriZQri2g2TBXG1imcE/vue-style.jpg)


不同于早期html的混乱状态（所有的代码都挤在一起），Vue提供了一种清晰地治理方式。如上图所示，一个页面被分成三块：前端模板 、业务逻辑和显示样式，将功能分区治理。联系我的上一篇文章《Vue用法的城市化比喻》，前端设计越加贴近人的真实思维方式，和现实中的治理有异曲同工之妙。


## 数据中心--data
![vue-data.jpg](https://cdn.steemitimages.com/DQmXvmLdWXxtMRPSaXvjv76aCcVGaKWJHrqHfGN1GrUPJp9/vue-data.jpg)

Vue不提倡自带数据，它希望所有的数据都在一起管理，这个就是data的作用。如上图所示，前端要获取数据，直接使用插值表达式 {{ msg }} 这样来获取就可以了。在业务逻辑中 使用` this.msg `这样来获取。这样集中管理数据会有很多设计上的便利性。

## 行政中心--methods
```js
 methods:{
      setMessage(){
        this.msg = 'this is a big thing';
      }
  }
```

所有的业务逻辑都被安放在methods中，你想要做什么通过它们就可以了，类似于行政中心。

## 市长印章--this

因为数据和函数都有所谓的作用域，之间是不能互相通信的，也 就是说 B函数不能调用A函数中的数据。如果要相互调用应该怎么办呢？

我们在生活中都有经验，身份证要有效必须要盖上无数个章，这使得它有合适的法理性。同理，数据或函数要在任意地方被调用，也必须具备法理性，这个法理性就是加上`this`，我们可以形象地把它看为市长印章，我们要在哪里调用，直接加个`this`就可以了，比如这样：`this.msg ` , `this.func`。

当然，还有其它地治理，这里先提这么多，大家可以自行拓展。