Vue的介绍和入门

@TOC

一、基本介绍

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

在上古时代，前端与后端是不分家的，前后端代码也是不分离的，写一个网站，就是用在php文件中混杂着sql语句，拼接着html代码，如同韭菜馅一般稀里糊涂，反正最终能渲染出页面即可。从某个意义上讲，上古时代的程序员都属于全栈程序员。

到了近现代，前后端开始分离了，毕竟web2.0时代到来了，前端显得越来越重要，那些酷炫的效果虽然没什么用，但看起来很厉害的样子。此时开发网站已经有了成熟的流程：

由产品经理确定需求，设计出效果图，前端写静态页面，后端写业务逻辑，输出数据到前端页面。此阶段，后端人员属于c位，前端人员依然属于被忽视的群体，收入也比不上后端

而今，前端人员如同翻身农奴，已经有了成熟的前端开发体系，不再是只做切图，写静态模板页面这些边角料的工作。而是如同后端开发一样有完整的生态体系，而且复杂度并不亚于后端，收入自然也水涨船高。

而我们接下来要接触的vue，就属于现代化的前端框架，如果你以前对于前端的认识仅局限于用jquery操作dom，那么vue将颠覆你的三观，在学的过程中会不断地感慨：“卧槽，还可以这么玩？”

二、基本功能

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

三、语言特点

1.易操作

在有HTML，CSS,JavaScript的基础上，快速上手。

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

Vue.js 的 API 的对于其他框架的参考不仅是参考，其中也包含了许多 Vue.js 的独特功能。

2.灵活

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

3.性能

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

第一种

<div :style="{backgroundColor:divColor}"></div>
//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          divColor:"green"
      }
    });
 
</script>

​
第二种

<div :style="divStyle"></div>
//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          divStyle:{
            backgroundColor:"green",
            width:"100px",
            height:"100px"
          }
      }
    });
</script>

​
第三种

<div :style="[divStyle,{backgroundColor:divColor}]"></div>
//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          divStyle:{
            backgroundColor:"green",
            width:"100px",
            height:"100px"
          }
      }
    });
</script>

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

四、开发技巧

状态共享

随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。

如下这个例子，我们将在组件外创建一个store，然后在App.vue组件里面使用store.js提供的store和mutation方法，同理其它组件也可以这样使用，从而实现多个组件共享数据状态。首先创建一个store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。

长列表性能优化

我们应该都知道vue会通过object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止vue劫持我们的数据呢？可以通过object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

去除多余的样式

随着项目越来越大，书写的不注意，不自然的就会产生一些多余的css，小项目还好，一旦项目大了以后，多余的css会越来越多，导致包越来越大，从而影响项目运行性能，所以有必要在正式环境去除掉这些多余的css，这里推荐一个库purgecss，支持CLI、JavascriptApi、Webpack等多种方式使用，通过这个库，我们可以很容易的去除掉多余的css。