Vue框架----入门

          Vue框架是三大框架比较流行的框架之一，相比angular框架是比较简单的，因为，我们知道angular框架是通过mvc架构来进行的，也就是说，我们通过c层来控制modle与v层的交互，这是mvcvm来进行的，这个是通过模块化的来管理的，也就是说，每个v层对应着c层，也就是说，对应着一个控制器来进行数据的处理和逻辑的交互。angular框架就是这样的设计思路。所需要的功能和方法，我们都可以通过依赖注入来进行数据之间的传值。在factory 工厂方法里面，我们可以封装一些方法，来进行注入到app下的所需要的数据接口。也可以通过server服务来进行数据的传值。angular框架的设计思路都是以数据为中心。都是通过数据之间的交互来进行控制页面的数据。对应的控制器，引入不同的模块，来进行不同的服务之间的调用。在Vue中，是以组件开发为设计思路的，一个页面都是用小的组件来进行拼接的，从小到大的拼接模式来进行页面的架构的。每个组件都可以对应着一个有Vue构造函数下的实例。在构造函数的实例中，我们可以通过数据的绑定处理，通过实例下的不同属性来进行设置不同的方法和数据的设置的。也就是说，Vue框架也就是以数据为中心的，所以，我们的页面数据都是以监听数据为基础的，实例的创建和消失都是有生命周期的，在每个生命周期中，都会执行不同函数来进行逻辑的数据的处理和交互，来满足我们的项目的需求的。

  Vue实例的周期：如图；

        这个是Vue下的实例生命周期。我们可以通过在不同的生命周期中，可以处理不同的数据类型。比如在created函数中， 我们可以发起网络请求。因为这样，我们的数据变量data已经处理过了，因而，请求下来的数据就可以渲染到页面中了。这就是充分利用生命周期的不同的阶段来进行不同的数据请求了。我们请求下来的数据，我们可以在自定义组件里进行渲染，通过传值的方式。通过props['']方式来进行传值。代码如下：

       这是自定义组件所在的实例向自定义组件传值。这是通过大实例来进行传值，就是以数据为中心的。自定义组件就是通过prope[''],来进行传值。

自定义的组件： 因为在自定义组件开发中，我们Vue框架中，其设计思想就是以组件化开发。组件开发就是以大的组件（一个组件也可以是个页面），也可以是个元素，也就是说，页面每个元素都可以的看做是个组件的。我们在开发项目中，我们用的是Vue-cli脚手架来进行安装。然后，架构项目。首先，我们可以通过命令来进行安装我们需要的项目，安装如下：

这样，我们可以初始化我们需要的文件夹和项目架构。因为，我们利用vue框架来做单页面应用的，所以，我们要在项目架构中，架设路由，引入模块的操作等等。

在项目中，我们的项目文件夹中，我们需要了解我们的文件夹的用途，其中，我们开发项目中，经常用的是，src index.html app.vue component等等。

我们可以通过思维导图来进行看看我们的重要的文件夹的作用；

这是，我们需要的项目文件信息。其中，项目是入口是main.js文件。我们的主页就是我们的项目展示数据的页面，是index.html文件，在主页里面，我们不需要做任何的改动，其内容如下：

其中，只有一个id值为app的div，这个盒子就是我们的项目的主vue实例，也是生命周期比较长的实例，项目中所有的实例都会在这个实例管理之下的。 这是我们的所有的文件都是在这里插入进行的。为什么能插入这里呢？因为在这main.js中，我们可以看到其关联一起，代码如图 ： 

          通过实例中的挂载，可以在main实例中操作，也和index.html联系在一起了。利用template属性来把 引导到index.html文件里面。这样，我们将来的项目的都会在index.html 中插入。引入我们的相关的模块的，首先是引入是 Vue 框架，通过import (模块的保存变量) from (模块的名称) ，等等，我们引进相关的模块，引入我们的项目的一级组件，二级组件，架设的路由条目和制定的路由规则。我们可以通过抽出去放在router文件中index.js,因为，main.js中所主要的是引进的模块和引进的项目组件，架设的路由条目，和制定的路由规则。这样，就可以把相关的逻辑路由相关的代码就可以放到一个文夹里统一管理，在main.js中比较好管理。放到index.js中，我们要先导出来，以便在main.js中导入。这样，我们才能用到路由的架设。

我们在main.js中，我们可以引进相关的模块来进行操作，有的模块需要全局安装。在其他的组件都可以调用。

-------------------------------------------------------------------------------------->

Vue响应式原理：也就是数据更新的原理。相比较的是angular框架，通过脏查询的机制来保持数据的一致性。这样，要重新查询整个DOM,运行起来，性能比Vue就比较重。而Vue是通过响应式追踪数据的变化的，通过把数据传给Vue实例下的data属性，而data属性下，有setter/getter，会进行依赖追踪，每个Vue实例都会有watch属性，每当数据变化是，就会通知watch,重新计算数据，而一致性关联的组件得以更新。这个就是Vue框架的响应式原理。