🌟前言
从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作DOM元素。但是当我们大量的去操作DOM元素时，就会出现很多性能相关的问题。MVVM 的出现，完美解决了以上三个问题；而我就今天要讲的Vue就是基于MVVM的一个渐进式框架。最初它不过是个人项目，时至今日，已成为全世界三大前端框架之一，github 上拥有 15 万 Star 领先于 React 和 Angular，在国内更是首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。所以MVVM又是什么？Vue又是什么呢？
🌟MVVM模式
Vue在设计上使用MVVM(Model-View-ViewModel)架构模式。
当应用庞大到一定程度时，MVC架构模式也将变得十分复杂，特别是View的逻辑部分变得难易维护。在这样的背景下，MVVM(Model–View–ViewModel)的架构模型应运而生。前后端分离架构与SPA应用都离不开MVVM的流行,这些都带来了前端技术的快速发展。
通过MVVM的模式拆分为视图(View)与数据(Model)两部分，并将其分离。ViewModel是MVVM模式的核心，是连接View和Model的桥梁。视图(View)与数据(Model)通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
🌟Vue简介
Vue官方网址 Vue是一个轻量级的MVVM前端框架，使用Vue可以让Web开发变得简单，同时也颠覆了传统前端开发模式。
Vue是一个基于JavaScript开发的MVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
🌟Vue重要版本发布
2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。
2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。
2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。
🌟Vue特点
简洁：页面由HTML模板+Json数据+Vue实例组成。
轻量：Vue的生产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb。
快速：Virtual DOM进行高效的DOM更新。
数据驱动：操作数据，DOM的事情Vue会帮你自动处理。
模块友好：结合一些第三方模块构建工具，如CommonJS、RequireJS或者SeaJs，可以轻松实现代码的模块化。
组件化：用可复用、解耦的组件(.vue)来构造页面。
文档友好：中文api文档和官方教程。
🌟快速上手Vue
安装Node环境 Node官网
去官网下载你电脑所对应的版本，一路回车即可。也可以看看我写的这篇博文去使用NVM(NVM-Node管理工具)。
Vue安装
script标签引入 <script src="vue.js"></script>
CDN引入 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
命令行工具 (CLI)
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
🌟Hello Vue
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><scriptsrc="./vue.js"></script></head><body><divid="app"><h1>{{message}}</h1></div><script>newVue({ el:'#app', data:{ message:'Hello Vue' } }) </script></body></html>
<!--App.vue--><template><divid="app"><imgalt="Vue logo"src="./assets/logo.png"><h1>{{message}}</h1></div></template><script>exportdefault { name: 'App', data() { return { message: 'Hello Vue' } } } </script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;margin-top: 60px; } </style>
