vue介绍

（了解）vue介绍

（了解）介绍

(vue官网)[https://cn.vuejs.org/] 国人尤雨溪创建。15年起短短两年发展起来，github从1k start到70k，到目前150k（2019）。
侧重view层。基于js es5语法。浏览器渲染性能较好。
argular 出现到最早到，企业级，语法传统，学习成本略高，国内用户较少。
react 也比较流行。国内跟view分庭抗礼。

vue及其生态

vue.js: 核心功能
vue-cli: 脚手架工具。 类似express-generator
vue-loader: scss sass less stylus 等css预处理语言的编译器。
vue-router: 路由。 类似express app.get(’/’, function(){})
vuex: 组建状态管理工具。
vue-devtools: 开发者工具，方便调试。
webpack: 打包📦工具。项目拆分和整合。

MVC架构和MVVM

MVC: model模型、view视图、controler控制器。
代表框架 java ssh 、python django、nodejs express（MTV）。
以express框架为例： model指数据库结构， controle指路由控制分发 app.get(’/index’, function(req, res){}) ,
view function(req, res){ res.render(‘xx.ejs’, {students: []})}
优点，数据流向清晰，适合构建大型项目。缺点，html代码从后端返回，前后端未分离，渲染重复耗时；分层太细，小项目麻烦，c层配置麻烦。
单项数据流： 用户 ➡️ request ➡️ C层路由分发 ➡️ M取数据 ➡️ V视图模板 ➡️ response ➡️ 用户

MVVM: model ➡️ view view ➡️ model
双向绑定数据流： [model ⬅️➡️ view] ⬅️➡️ 用户
优点，MV层映射建立后，用户只用操作外部接口，只用跟v层做交互，不需关注底层细节。

单页应用

SPA: single page
例如企业官网，顶部导航每个目录链接一个新页面，传统的多页。如果是中小企业，为了简洁，可以一个页面。
单页例如http://demo.cssmoban.com/cssthemes6/dash_2_marshmallow/index.html#plans
多页例如https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent
express框架，每个路由render一个页面，也是多页。

这里说的单页不侧重网页到底写成还是写成多页，侧重开发模式的变化。
因为现代软件项目越来越复杂和nodejs出现后有后端灵活能力。html/css/js越来越难以开发（几十html页面，数个js文件每一个js几千行）。
利用nodejs的编程能力，变量、方法、模块化，把重复的html代码抽出来，把复杂的前端文件html/css/js分成多个脚本开发，开发完成后再
合并编译build成一个完整的输出distribute分发 index.html/main.css/main.js 。跳转功能靠div 的id值和url #，vue-router。
优点：最终代码文件看似一个网页，实现无刷新跳转，部署和分发服务器更加简单。 缺点：不太利于搜索引擎爬虫。

vue VS js、jquery

jquery， 思想操作dom。
vue， 基于js es5新特性，双向绑定数据，虚拟dom树，通过操作数据间接更改虚拟dom间接更改真实dom。封装程度更高，操作接口层抽象度更高。

vue版本选择 2019.11

1.x 14年 现在几乎已见不到，老项目也极少。
2.x 2.0.x- 2.6.x 大量使用。2.3.x跟2.0.x个别语法不太一样
3.x 19-20年 正在开发，即将发布正式版。
vue框架流行、版本更新快速，学习应注意原理，以防版本变了就不会了。

安装devtool

chrome商店vuedevtool