Astro轻应用 AstroZero-如何理解标准页面中的数据模型？

时间：2023-11-01 16:18:02

Astro轻应用 AstroZero

如何理解标准页面中的数据模型？

标准页面类似于Vue的数据双向绑定，通过绑定数据模型，可以快速获取后台数据，并体现到页面组件上。因此，为了获取后台数据，则需要先定义页面数据模型，再进行与前端组件的绑定。在将模型与前台页面组件绑定后，开发者只需要关注模型数据的实例化和处理，不需要关注页面的渲染和展示。

每个和数据有关的组件，在其属性面板侧都可进行数据绑定。绑定主要分为如下两种：

值绑定：组件的返回值，也可以理解为默认的属性value绑定。典型的值绑定场景有表单、表格、列表视图。输入框、下拉框等基础组件对应的value属性，类似Vue的v-model。
属性绑定：对该组件所有属性的动态设置。典型的属性绑定场景有下拉框组件的选项值、步骤条组件的步骤值，组件的隐藏展示根据数据模型动态展示等，类似Vue的v-bind。

如果某组件属性绑定了数据模型，会以数据模型值为最高优先级，即以模型值为准，忽略设置的静态值。例如，需要隐藏某组件，可将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。您也可以通过打开该组件的属性“公共”下“隐藏”开关，静态配置该组件隐藏。如何定义数据模型，请参考定义页面数据模型。

图1 数据绑定