🌟前言
从历史的潮流来说，人们从之前的:原生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也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model
的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View层显示会自动改变（对应Vue数据驱动的思想）
🌟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标签引入
- CDN引入
- 命令行工具 (CLI)
Vue 提供了一个官方的 Vue CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了内置支持的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue
生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需
eject。
Vue CLI安装
Node 版本要求:
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
- 可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli # OR yarn global add @vue/cli
- 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确：
vue --version # OR vue -v
通过Vue CLI创建一个Vue项目
- vue create
vue create hello-world
- 使用图形化界面
- 你也可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui
🌟Hello Vue
- script引入：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> <script src="./vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> <script> new Vue({ el:'#app', data:{ message:'Hello Vue' } }) </script> </body> </html>
- Vue CLI构建工程：
// mian.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
<!-- App.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <h1>{{message}}</h1> </div> </template> <script> export default { 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>
🌟Vue实例
每个 Vue 应用都是通过 Vue 构造函数创建一个新的 Vue 实例开始的：
var vm = new Vue({ // 选项 })
变量vm保存的就是Vue的实例。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
示例
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> <script src="./vue.js"></script> </head> <body> <!--这是我们的 View--> <div id="app"> <h1>{{message}}</h1> </div> <script> // 创建一个 vue实例，连接 View 与 Model new Vue({ el:'#app', data:{ message:'Hello Vue' } }) </script> </body> </html>
当创建一个 Vue 实例时，你可以传入一个选项对象。
| 参数 | 类型 | 描述 |
| el | string\HTMLElement | Vue实例作用的根DOM对象，通过CSS选择器或DOM对象与html模板绑定 |
| data | Object/function | Vue实例数据来源，其值的类型为JSON对象。视图就可以访问到message该属性 |
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
上述 Hello Word! 示例中，数据和 DOM 已经被绑定在一起，所有的元素都是响应式的，在控制台修改app.message时，页面中的数据也会更新。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
🌟写在最后
这篇文章为大家介绍了Vue的简介、Vue环境搭建。创建Vue项目以及’Hello Vue’，你是否学会了呢，小伙伴一定记的尝试哦，后续会为小伙伴们持续更新Vue基础语法以及一些实战小魔法！各位小伙伴让我们 let’s be prepared at all times！
