Vue是一个构建用户界面(UI)的[渐进式JavaScript框架 。vue.js的核心特点—响应的数据绑定。传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html元素的数据,就的使用js代码获取元素然后在处理业务逻辑。响应式数据绑定的方式操作页面,可以直接使用像下面代码那样的写法就可以将数据填充到页面中。
那么我们为什么要学习Vue框架呢?
通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在需要手动操作DOM元素, 前端的Vue之类的框架, 不提倡手动操作DOM元素。
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
它有两个方向:
一是将模型转化成视图,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
二是将视图转化成模型,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。
这两个方向都实现的,就是数据的双向绑定。
低耦合,视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
可重用性,可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
独立开发,开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。
可测试,界面向来是比较难于测试的,而现在测试可以针对ViewModel来写
双向数据绑定,它实现了View和Model的自动同步,当Model的属性改变时,不需要手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。
在MVVM的框架下,视图和模型是不能直接通信的,它们通过ViewModal来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序,支付宝小程序
Cube UI - 滴滴出行移动端 UI 库,质量可靠,标准规范,扩展性强
VUX - 移动端 UI 组件库,针对微信强势优化
NutUI 3.0 - 京东移动端 UI 库,面向电商业务场景
Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发
Vue UI 组件库与卡拉云