Vue学习笔记

前言:
学习B站UP主狂神说视频笔记整理视频链接

概述

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动
Vue学习笔记_第1张图片
官网:vue.js

MVVM

MVVM源自于经典的 MVC (Model-View-Controller)模式。MVVM的核心是ViewModel层,负责转换Model 中的数据对象来让数据变得更容易管理和使用,其作用如下:

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互
    Vue学习笔记_第2张图片
    Model-ViewModel-View-Controller

上图描述了MVVM一个基本结构,看到了什么,是不是发现比MVC架构中多了一个ViewModel,没错,就是这个ViewModel,他是MVVM相对于MVC改进的核心思想。在开发过程中,由于需求的变更或添加,项目的复杂度越来越高,代码量越来越大,此时我们会发现MVC维护起来有些吃力,首先被人吐槽的最多的就是MVC的简写变成了Massive-View-Controller(意为沉重的Controller)

由于Controller主要用来处理各种逻辑和数据转化,复杂业务逻辑界面的Controller非常庞大,维护困难,所以有人想到把Controller的数据和逻辑处理部分从中抽离出来,用一个专门的对象去管理,这个对象就是ViewModel,是Model和Controller之间的一座桥梁。当人们去尝试这种方式时,发现Controller中的代码变得非常少,变得易于测试和维护,只需要Controller和ViewModel做数据绑定即可,这也就催生了MVVM的热潮。

MVVM的实现者

  1. Model:模型层,在这里表示JavaScript对象
  2. View:视图层,在这里表示DOM (HTML操作的元素)
  3. ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM中的ViewModel层的实现者

在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个 Observer观察者

  • ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
  • ViewModel能够监听到视图的控化,并能够通知数据发生改变

至此,我们就明白了,Vue.js 就是一个MVVM的实现者,他的核心就是实现了DOM监听与数据绑定

为什么要使用Vue.js

轻量级,体积小是一个重要指标。Vue.js 压缩后有只有20多kb (Angular压缩后56kb+,React压缩后44kb+)

移动优先。更适合移动端,比如移动端的Touch事件易上手,学习曲线平稳,文档齐全

吸取了Angular (模块化)和React(虚拟DOM)的长处,并拥有自己独特的功能,如:计算属性

开源,社区活跃度高

快速上手

安装

说明

IDEA中可以安装Vue插件

注意:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

直接用

你可能感兴趣的:(狂神说学习笔记,vue,javascript)