欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue学习之路 - 0.背景

程序员文章站 2022-06-26 09:36:55
1 单页面应用程序 Single Page Application (SPA) 从字面意义来看就是一个网站就一个页面,如: coding 网易云音乐 极致的用户体验,就像nativeapp一样 优点: 具有桌面应用的即时性、网站的可移植性和可访问性。 用户体验好、快,内容的改变不需要重新加载整个页面 ......

 

1 单页面应用程序

 

  •  Single Page Application (SPA)
  •  从字面意义来看就是一个网站就一个页面,如:
    • coding
    •  网易云音乐
  • 极致的用户体验,就像nativeapp一样
  • 优点:
    • 具有桌面应用的即时性、网站的可移植性和可访问性。
    • 用户体验好、快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
    • 基于上面一点,SPA相对对服务器压力小。
    • 良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。
    • 对前端人员javascript技能要求更高,促使团队技能提升。
  •  缺点:
    • 分功能模块的鉴权不好实现。
    • 不利于SEO。所以不适用于购物网站
    • 前进、后退、地址栏等,需要程序进行管理;
    • 书签,需要程序来提供支持;
  • 简单的应用原理:
    • hash
    • window.onhashchange事件
    • 当hash改变的时候,根据不同的hash做不同处理

2 MVVM模式

MVVM是Model-View-ViewModel的简写。 一种架构模式,开发思想。这种模式最大的好处在于解耦,数据和视图不再是强耦合在一起。它本质上就是MVC 的改进版。

M     -       Model        业务数据模型

V      -       View                   视图

VM   -       ViewModel        视图数据模型(负责V和M交互)

 

核心思想:数据驱动视图(VM)

 

优点:

1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。

4. 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

 

3 主流的前端Java Script框架

  • Angular
    • 09年诞生
    • 原来是个人开发的,后来被谷歌收购了
  • React
    • 诞生于facebook公司内部
    • facebook不满足于市场上所有js框架,所以自己搞了一个。
  • vue.js
    • 尤雨溪(中国江苏无锡人)----创造
    • 12年左右诞生
    • 文档都中文的,对英文要求不高,非常友好

目前在国内公司中,BAT级别的企业:React > Angular > vue,不大使用国内产品。在中小型公司,vue.js更多一些

 

4 Vue.js介绍

是什么?

  • 前端Java Script框架

 

为什么要用它?

  • 它能帮助提升网站应用程序开发效率

 

一般什么情况会使用?

  • 一般需要开发SPA应用程序的时候取用
  • 但是vue是渐进式的,可以融入到不同的项目中
    • 既可以和传统的网站开发架构融合在一起,例如:可以简单的把它当作一个类似JQuery的库来使用。
    • 也可以使用它开发大型的SPA单页面应用程序。

 

发展历史

  • 作者:尤雨溪(微博:尤小右),设计出身。
    • 知乎
    • 新浪微博
  • 作者尤雨溪最初在2013年12月8号在GitHub上发布0.6版
  • 2015年10月正式发布了1.0版本
    • vue在1.0版本发布后才开始崭露头角
  • 2016年10月份正式发布了2.0版
  • 1.0老的项目可能还在用,新项目绝对选择2.0

 

心态:国内的产品不一定就是不好,框架只是个工具,不应该懂了或者精通就有自我优越感。不要看不起国产,也不要执着于一个框架。

 

相关资料:

中文官网:https://cn.vuejs.org/

GitHub:    https://github.com/vuejs/vue

官方教程:https://cn.vuejs.org/v2/guide/

API参考文档:https://cn.vuejs.org/v2/api/

 

建议:学习前端框架,多参考文档,不建议买书,

  • 版本更新较块,不适合看书。
  • 很多书都是直接抄的官方文档
  • 也说明,官方文档写的非常好。