Vue框架入门

它是一个用户界面（UI）〔Progressive JavaScript framework。vue.js的核心特性是响应数据绑定。传统的js操作页面：在过去，当使用js来操作页面时，您需要对某个html元素的数据进行操作，因此您可以使用js代码获取该元素，然后处理业务逻辑。响应数据绑定用于操作页面，您可以直接使用方法像下面的代码一样将数据填充到页面中。

那么我们为什么要学习呢？

通过学习Vue提供的指令，将数据呈现到页面非常方便。不再需要手动操作DOM元素。前端Vue和其他框架不支持手动操作DOM元素。

MVVM是Model View ViewModel的缩写。它是一种基于前端开发的架构模式。其核心是为View和ViewModel提供双向数据绑定，这使得ViewModel的状态变化能够自动传递到View，即所谓的双向数据绑定。

它有两个方向：

第一个是将模型转换为视图，即将从后端传输的数据转换为您看到的页面。实现方法是：数据绑定。

第二种方法是将视图转换为模型，即将所看到的页面转换为后端数据。实现方法是：DOM事件侦听。

实现了这两个方向，即数据的双向绑定。

MVVM的优点：低耦合，视图可以独立于模型进行更改和修改。ViewModel可以绑定到不同的视图。当视图更改时，模型可以保持不变，而当模型更改时，视图可以保持不变。

可重用性：您可以将一些视图逻辑放入ViewModel中，以便许多视图可以重用此视图逻辑。

独立开发，开发人员可以专注于业务逻辑和数据开发（ViewModel），设计师可以专注于页面设计，使用ExpressionBlend可以轻松设计界面并生成xml代码。

可测试。接口一直很难测试，但现在可以针对ViewModel编写测试

双向数据绑定实现了视图和模型的自动同步。当模型的属性更改时，不需要手动操作Dom元素来更改视图显示，但更改属性后，与属性对应的视图图层显示将自动更改。

MVVM的特点：；在MVVM的框架下，视图和模型不能直接通信。它们通过ViewModal进行通信。ViewModel通常实现一个观察者。当数据更改时，ViewModel可以监听这些更改，然后通知相应的视图自动更新。当用户操作视图时，ViewModel还可以监听视图中的更改，然后通知数据进行更改，这实际上实现了数据的双向绑定。MVVM中的View和ViewModel可以相互通信。

Vue移动UI组件库推荐：Vant 3-统软云移动UI组件，支持Vue 3微信小程序和支付宝小程序

Cube UI-滴滴出行手机UI库，质量可靠，规格标准，可扩展性强

VUX-移动UI组件库，针对微信进行了强烈优化

NutUI 3.0-京东移动UI库，用于电子商务业务场景

Vuetify 3-旧Vue UI，基于谷歌的材料设计风格开发

Vue UI组件库和KaraCloud