Vue2

Vue 是前端主流框架之一，和 React.js、Angular.js 一起，并称为前端三大主流框架。

Vue 概述

[ Vue 原理 ]  Vue.js（ 读音 /vjuː/，类似于 view ），是一套构建用户界面的渐进式框架。

与其他框架不同的是，Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或已有项目整合。同时，与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 完全能够为复杂的单页应用程序提供驱动。

前端的主要工作：主要负责 MVC 中的 V 这一层；主要工作就是和界面打交道，来制作前端页面效果。

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

[ 兼容性IE9 ] 由于 Vue 使用 getter/setter 等 IE8 不能模拟的 ES5 特性，所以它不支持 IE8 及以下版本。 // 也就是说，一些政府项目或者一些比较老的站点需要支持 IE8，Vue 是绝对不能选的了 — important！ [ 版本 ] 最新稳定版本：2.6.10 // 2019.5

1 2 3 4

[ 兼容性IE9 ] 由于 Vue 使用 getter/setter 等 IE8 不能模拟的 ES5 特性，所以它不支持 IE8 及以下版本。 // 也就是说，一些政府项目或者一些比较老的站点需要支持 IE8，Vue 是绝对不能选的了 — important！   [ 版本 ] 最新稳定版本：2.6.10               // 2019.5

Vue 学习图谱

搭建 Vue 开发环境  /  项目初始化    —    生产环境（ 打包、部署 ）

• Vue 调试工具：直接从 Chrome 网上应用店搜索 “ Vue.js devtools ”，然后，添加到扩展程序即可

前端开发中的解决方案，主要用于解决以下 7 个方面的问题：

[1] DOM：Vue 中，一个核心概念，就是让用户不再操作 DOM 元素，让程序员有更多的时间去关注业务逻辑

[2] Architecture：Vue 是一套 MVVM 风格的架构

• Vue 实例：每个 Vue.js 应用都是通过构造函数 Vue 创建一个根实例启动的。
  • Vue 实例的选项
    • ...
    • computed：表达式的计算逻辑可能比较复杂，使用计算属性可以使模板内容更加简洁
    • filter：主要作用 — 格式化数据，如字符串格式化未首字母大写、将日期格式化为指定的格式等
    • watch：应用场景 — 数据变化时，执行异步或开销较大的操作，如验证用户名是否已被使用（ 配合 .lazy ）
  • Vue 实例的生命周期（ 应用场景：初始化（ 异步 ）数据处理 - mounted ）

以下为 Vue 核心最基本的功能：

[3] Templating（ 模板语法 ）                              // 本质上就是 DOM

主要涉及以下几个方面：HTML「 节点操作、属性操作 」-  CSS「 样式操作 」和 JS「 事件处理 」。

• 模板内容  -  声明式渲染：插值、指令（ 自定义指令 ）
  • v-model 双向数据绑定
  • Vue 中样式的使用 - class 和 style 样式绑定
  • 事件处理  -  事件绑定 & 事件修饰符（ 按键修饰符、系统修饰符 ）
• 模板逻辑  -  条件渲染 & 列表渲染
  • Vue 过渡系统
  • 数据元素的过渡系统

[4] Component                                               // Vue 组件规范

• 组件化开发（ 单文件组件 & 模块化 ）
  • 组件注册：组件之间的相互嵌套、引用，形成了父子级组件
  • 组件通信：父子级组件的数据传递与消息发送
  • 内容分发：父组件向子组件传递内容；插槽 <slot>，实际上就是子组件中的提供给父组件使用的一个占位符

# UI 组件库  -  Element UI    /    iview admin Pro   /   vuetify

「 Vue 插件 」Vue 中，插件，通常会为 Vue 添加全局功能，它的范围没有限制。以下是一些常用的前端插件：

[5] Routing

• 前端路由（ 在 Vue 中使用 vue-router ）
  • 路由实例（ $router & $route  -  导航守卫、数据获取 ）
    • 路由实例的构造配置（ 路由规则  &  路由元信息（ 过渡动效 ））
      • path 路由匹配  -  动态路由匹配
      • component  -  路由懒加载
      •  路由重定向、默认子路由、路由别名、嵌套路由（ 路由设计  !important ）
    • 路由实例的其他配置
      • 路由模式 mode
      • 滚动行为 scrollBehavior
  • 声明式导航：router-link（ 命名路由 ）& router-view（ 命名视图 ）
    • 编程式导航

[6] Communication

• axios（ Http 库 ）
• vuex（ 全局状态管理 ）

[7] Utililty

• CSS 预处理器（ LESS / SASS / SCSS ）