Vue基本应用、指令、MVVM和MVC模式

一、前后端分离的架构

1、MVC架构模式

         一般MVC分为:Model(模型),View(视图),Controller(控制器)。 View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。

优点

1、把业务逻辑全部分离到Controller中，模块化程度高。当业务逻辑变更的时候，不需要变更View和Model，只需要Controller换成另外一个Controller就行了。

2、观察者模式可以做到多视图同时更新。

缺点

1、Controller测试困难。因为视图同步操作是由View自己执行，而View只能在有UI的环境下运行。在没有UI环境下对Controller进行单元测试的时候，Controller业务逻辑的正确性是无法验证的。
2、View无法组件化。View是强依赖特定的Model的，如果需要把这个View抽出来作为一个另外一个应用程序可复用的组件就困难了。

• Model: 模型（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法）
• View: 视图（渲染页面）
• Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑）
  

2、MVVM架构模式

         它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

优点

1、高可维护性。解决了MVC大量的手动View和Model同步的问题，提供双向绑定机制。提高了代码的可维护性。

2、简化测试。View跟着Model同时变更，所以只需要保证Model的正确性，View就正确。大大减少了对View同步更新的测试。

缺点

1、对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高。
2、 过于简单的图形界面不适用，或说牛刀杀鸡。

• Model：代表数据模型，也可以 在 Model 中定义数据修改和操作的业务逻辑。
• View：视图，代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
• ViewModel: 是一个同步 View 和 Model 的对象。
  

二、Vue的使用

1、基本应用

使用步骤

A、引入vue.js文件

 <script src="../js/vue.js"></script>

B、创建DOM组件，并定义id属性

   <div id="app">
			<p>{
   {
    msg }}</p>  //使用HTML的模板语法，用{
   { 变量名 }}来渲染数据
	   </div>

C、创建Vue对象，与DOM组件进行绑定

<script>
		//创建一个Vue对象
		new Vue({
   
			el