0.前言
通常前端开发者在搭建项目时会使用一些框架,可以使开发者的速度、效率加快,常用的例如vue、react等
下面,简单分享一下什么是vue,以及个人对vue的一些理解,若有不当之处还请指正~
1.什么是vue
Vue是一套用于构建用户界面的前端框架
构建用户界面:用vue往html中填充数据,非常便捷
框架:一套现成的解决方案,程序员只能遵守框架的使用规则,去编写功能需求
2.vue的两个特性
2.1 数据驱动视图
在使用vue的页面中,vue会监听数据的变化,从而自动重新渲染页面的结构,如图:
好处:当页面数据发生变化时,页面会自动重新渲染
注意:数据驱动视图是单向的数据绑定(数据变化导致页面更新)
2.2 双向数据绑定
- js数据发生变化时,会被自动渲染到页面上
- 页面上表单信息的数据发生变化时,会被vue自动获取到,并更新到js数据中
在填写表单时,双向数据绑定可以辅助开发者不操作DOM的前提下,自动把用户填写的内容同步到数据源中,如图:
(在网页中,form表单负责采集数据,Ajax负责提交数据)
好处:开发者不再需要手动操作DOM元素,来获取表单元素最新的值
3.vue数据的双向绑定 MVVM
MVVM模式(全称为Model-View-ViewModel),是Vue实现数据双向绑定和数据驱动的核心原理。
在MVVM中,View为视图层,ViewModel为业务逻辑层,Model为数据层。
Model 表示当前页面渲染时所依赖的数据源
View 表示当前页面渲染时的DOM结构
ViewModel 表示vue的实例,它是MVVM的核心部分
工作原理:
ViewModel作为MVVM的核心,起到了将当前页面的数据源和页面的结构连接在一起的作用
当数据源发生变化时,会被ViewModel监听到,VM会根据最新的数据源自动更新页面结构
当表单元素的值发生变化时,也会被VM监听到,将最新的值自动同步到Model数据源中
4.vue的优势
- 上手简单,易操作
- 轻量级
- 高性能
- 插件化
- 便于测试
- 生态丰富
vue官网:https://cn.vuejs.org/