vue(一文快速详解前端框架 Vue)

管理员 2022-10-02 22:51:44 0

Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量**的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。

今天带领大家来了解一款渐进式JavaScript框架——Vue。

一文快速详解前端框架 Vue

近年来,前端**领域,旧浏览器逐渐淘汰,**端**需求逐年**,前端交互越来越多,功能越来越复杂。架构从**后台MVC向REST API + 前端MV* 迁移。

MV*相当于MVC即:

Model(模型)表示应用程序核心(比如数据库记录列表)。

View(视图)显示数据(数据库记录)。

Controller(控制器)处理输入(写入数据库记录)。

MVP

Model(模型)表示应用程序核心(比如数据库记录列表)。

View(视图)显示数据(数据库记录)。

Presenter(表示器)负责逻辑处理业务。

与MVC差别在于:

1、View与Model完全隔离。

2、Presenter与View的具体实现技术无关。

3、可以进行View的模拟测试。

MVVM(Vue就是一种MVVM框架)

Model(模型)表示应用程序核心(比如数据库记录列表)。

View(视图)显示数据(数据库记录)。

ViewModel(观察者)负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

优点:高内聚,低耦合(可重用性、可移植性)。

Vue是一款数据驱动+组件化的前端**框架,对比于Angular和React,Vue.js更轻量,gzip后大小只有26K (Angular 56K,React 44K),同时更易上手,学习曲线平稳,吸收两家之长,借鉴了angular的指令和react的组件化。

首先来看一个数据双向绑定的例子:

一文快速详解前端框架 Vue

Vue的组件化:

一文快速详解前端框架 Vue

Vue的轻量级:

一文快速详解前端框架 Vue

一文快速详解前端框架 Vue

Vue.js的核心思想:

数据驱动:数据(model)改变驱动视图(view)自动更新

一文快速详解前端框架 Vue

一文快速详解前端框架 Vue

组件化:扩展HTML元素,封装可重用的代码

一文快速详解前端框架 Vue

组件设计原则:

1、页面上每个独立的可视/可交互区域视为一个组件

2、每个组件对应一个工程目录,组件所需的各种资源在这个目录下就近维护

3、页面不过是组件的容器,组件可以嵌套自由组成形成完整的页面

相关资讯

热门资讯

热门话题