10.前端高效开发框架技术与应用

一、Vue基础知识

Web前端开发模式：

• 原生代码开发：直接使用原生HTML、CSS和JavaScript代码进行前端开发。
  • 优点：学习成本较低，容易入手。
  • 缺点：代码结构混乱，代码冗(rong)余，浏览器兼容性不成熟，不利于分工合作
• 代码库阶段：使用成熟开源的扩展库进行前端开发（如jQuery、Bootstrap等）。
  • 优点：开发快速，浏览器兼容性良好
  • 缺点：视图层和数据层混合在一起，不利于团队分工合作
• 框架开发阶段：采用前端的MVC模式或MVVM模式开发。
  • 优点：代码分层，便于团队合作，便于后续代码维护
  • 缺点：学习成本较高，框架更新换代较快（需要时刻处于学习新知识的状态）

MVC和MVVM开发：

• MVC模式：把应用程序强制性的划分为三部分：模型（Model）、视图（View）和控制器（Controller）

  • 执行过程：
    • View层接收动作，传递指令给Controller
    • Controller完成业务逻辑，要求Model改变状态
    • Model将新的数据发送给View，用户得到反馈
      

• MV-VM模式：

  • View层用来接收用户请求（DOM事件、Ajax等）
  • Model层处理数据，不再与View层交互数据
  • Controller层修改为ViewModel层（视图模型）
    • ViewModel监听View层请求状态的变化，同时刷新View层显示
    • ViewModel和Model之间进行数据双向绑定，Model层监听ViewModel的变化
      

• MVC和和MVVM模式区别：

  • MVC模式，数据是单向通信，遵循View -> Controller -> Model -> View方向
  • MVVM模式，数据可以双向通信
    

主流MVVM框架简介

• Angular：谷歌推出的前端MVVM框架

  • 功能强大：包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，自带了丰富Angular指令。
  • 推荐使用TypeScript，引入静态语法支持，代码更严谨。
  • Google维护：AngularJS由Google维护，社区非常活跃，能够很好促进它的发展。
  • AngularJS & Lonic：移动端跨平台APP开发黄金搭档。
  • 缺点：功能复杂，学习曲线陡峭。

• React： Facebook推出的前端JS库（不是严格意义上的MVVM框架）

  • 简单和专注，只专注于某一方面功能，学习简单。
  • 视图层使用JSX语法，增强视图层功能。
  • 一切以JavaScript为核心，JS规范做标准。
  • 跨平台移动APP开发能力强大，使用想着扩展可以快速开发移动端应用。
  • 缺点操作DOM能力较差，需要大量扩展的支持。

• Vue.js：尤雨溪（国人）于2014年开发的前端MVVM框架。

  • 学习成本较低，能快速进行应用开发。
  • 拥有非常强大的CLI工具，方便应用快速部署和模块化开发。
  • 扩展模块丰富，扩展功能强大。
  • 与Laravel集成，特别适用于服务器端API开发。
  • 缺点：跨平台移动APP开发能力薄弱。

• Angular & React & Vue各自优缺点对比：

  框架比较项	Angular	React	Vue
  发布时间	2009年	2013年	2014年
  维护者	谷歌	Facebook	尤雨溪(个人) Laravel
  视图引擎	HTML	JSX	HTML
  学习曲线	陡峭(TypeScript )	较复杂	简单
  大小	5000K+	130K+	50K+
  功能复杂度	完善	完善	简单
  文档	英文	英文	中文
  应用场景	大型复杂应用	中大型应用、移动跨平台开发	中小型轻量级应用

• 流行趋势对比：
  

二、Vue组件

三、Vue工程化工具

四、express服务器开发

五、axios网络交互

六、Vue-router

七、vuex状态管理

八、Vue-ui