Vue介绍

前端

创建时间:2024-02-22 22:11

阅读:

Vue简介
Vue的特性
MVVM介绍

Vue简介

Vue是一个构建用户界面的前端框架，文档地址：https://cn.vuejs.org/guide/introduction.html

Vue的特性

1.数据驱动视图
当页面数据发生变化时，页面会自动重新渲染。示意图如下：
注意：数据驱动视图是单向的数据绑定。

2.双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下：
过数据驱动视图和双向数据绑定的机制，Vue实现了一个响应式的系统，使得开发者可以更轻松地构建交互式和动态的用户界面。
开发者只需关注数据的变化，而不必手动操作DOM元素，Vue会负责处理视图的更新和渲染，从而提高开发效率并减少出错的可能性。

3.MVVM模式：编程思想模式，实现双向数据绑定，通过数据劫持，采用数据驱动页面更新的方式。

4.组件化：提高代码复用率，使代码更加容易集中式维护。

MVVM介绍

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了如下三个部分：

在 MVVM 概念中：
View 表示当前页面所渲染的 DOM 结构。
Model 表示当前页面渲染时所依赖的数据源。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

MVVM 的工作原理
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。