Vue基础

Vue是渐进式框架

前端知识体系

前端三要素：HTML（结构）、CSS（表现）、JavaScript（行为）

• CSS：CSS 预处理器
  1. SASS：基于 Ruby，通过服务端处理，功能强大
  2. LESS：基于 NodeJS，通过客户端处理，使用简单

• JavaScript
  1.TypeScript 微软的标准
  2.JavaScript 框架：jQuery、Angular、React、Vue、Axios
  3.UI 框架：Ant-Design、ElementUI、Bootstrap、AmazeUI
  4.JavaScript 构建工具：Babel、WebPack

• 三端统一：
  1.混合开发：实现一套代码三端统一（PC、Android、iOS）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），云打包：HBuild -> HBuildX，DCloud 出品；API Cloud，本地打包： Cordova
  2.微信小程序：WeUI

• 后端技术
  NodeJS ：
  1.Express：NodeJS 框架
  2.Koa：Express 简化版
  3.NPM：项目综合管理工具，类似于 Maven
  4.YARN：NPM 的替代方案，类似于 Maven 和 Gradle 的关系

• 当前主流前端框架
  1.Vue.js：iview、ElementUI、ICE、VantUI、AtUI、CubeUI
  2.混合开发：Flutter、Ionic
  3.微信小程序：mpvue、WeUI

• MVVM
  低耦合、可复用、独立开发、可测试

  View（表示 DOM（HTML 操作的元素））
  Model（表示 JavaScript 对象）
  ViewModel（前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型）

Vue基础

• Vue,js
  Vue.js 就是 MVVM 中的 ViewModel 层的实现者
  1.ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
  2.ViewModel 能够监听到视图的变化，并能够通知数据发生改变

• 语法篇
  v-if、v-else、v-else-if、v-for

• 事件篇
  v-on

• 网络篇
  使用Axios实现异步通信

Vue-cli

统一的目录结构、本地调试、热部署、单元测试、集成打包上线

vue-router 路由

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

• 配置嵌套路由
• 参数传递
• 组件重定向
• 路由模式与 404
• 路由钩子与异步请求
  beforeRouteEnter、beforeRouteLeave

vuex 状态管理

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式

• state、mutation、action、getter