逻辑的含义比较抽象，在数学里逻辑是指研究某个形式语言的有效推论。

举个例子: 若A是真的，则B也是真的。这句话描述了A和B的关系，这个关系就是逻辑。 深入了解逻辑，请点击这里。

页面逻辑跟数学逻辑类似，指的是用户操作和页面之间还有元素与元素之间的关系。

举个例子：如下方元素所示，若鼠标停留在图片上，图片信息显示。这个逻辑描述了鼠标操作和图片信息显示之间的关系。

标题

描述...

逻辑使页面真正的"活"起来. 那么怎样设置页面逻辑呢。

（1）事件逻辑：

事件逻辑指的是将事件与页面建立关系， 比如上文所举的例子"若鼠标停留在图片上， 图片信息显示"就是事件逻辑的表达方式。 要理解事件逻辑， 首先要了解事件的概念。

- 事件：

我们把页面当作一个有感觉系统的物体， 它能感知外界和自身的状态变化， 就如人一样。 这个感觉系统在页面中被称为事件系统。

以人为例， 若被其他物体触碰， 人可以感知到触碰这个事件， 那么我们可以设置一个逻辑为"当被触碰， 则举起手"。  类似人的感觉系统， 页面的事件系统通过发出事件来感知状态变化。 这个状态变化可以是用户的操作， 例如鼠标位置， 鼠标点击， 页面滚动， 键盘按键等， 也可以是页面内部的变化， 例如图片加载完成， 某个元素消失等。 

人的感觉是由神经末梢发出， 那么事件是从哪里发出呢? 页面的事件是由元素发出的。 当一个元素发出事件时， 事件可以沿着它的父子关系向上传递， 这种情况下该元素的所有父元素都会发出这个事件。 现在我们通过下方示例更直观的了解事件是怎样发出的。

示例分析： 当鼠标进入和离开这些元素时， 元素发出了对应事件。 当点击其中元素时， 元素也会发出对应事件， 并且点击事件沿着其父子关系向上传递。

- 事件逻辑

了解事件概念之后， 将事件和页面建立联系就可以用标准的语句表达：

当某个元素， 发出某事件， 则某元素， 做出某反应
当某个元素， 发出某事件， 则页面做出某反应

这就是事件逻辑， 事件逻辑可以使用wide进行设置。

关于设置事件逻辑的具体操作方法， 请查看逻辑用例。

（2）数据逻辑：

使用事件逻辑我们已经可以做出可以与用户交互的页面， 但是wide中事件逻辑有局限性。

1.  一定要有事件发出

2. 只能选择wide提供的操作

所以部分情况下事件逻辑无法满足需求。 为什么不改进wide的事件逻辑使之强大到足够支撑我们设置所有的页面逻辑呢? 因为， 事件逻辑虽然简单， 但是事件并不是页面的实质， 所以仅使用事件逻辑有时非常的繁琐和抽象， 那么页面的实质到底是什么?

- 数据

数据是页面的实质， 页面是数据的载体， 其功能是向用户展示数据， 并从用户处获取数据。 我们查看百度搜索的结果， 在淘宝网浏览的商品， 看新闻， 看订阅号都是页面在展示数据。 我们选择商品， 点赞， 评论， 发微博， 则是页面在获取我们的数据。

举例说明。 现在请将自己转为产品的角色来思考问题。 我们要做一个显示天气的页面， 除了显示今日天气的详细信息， 还需要显示未来几天的天气预测。 首先， 明确需求以后， 我们需要了解我们要呈现的天气信息有什么。

在确定了天气数据后， 我们才可以考虑以一种怎样的方式呈现这些数据。 实时温度放在页面的哪部分， 24小时温度用怎样的方式呈现等。 最简单的就是把这些数据罗列出来， 像文档一样让用户自己寻找， 但是这样的页面又有谁看呢? 下方列举了两个示例：

如何更好的呈现数据体现了产品能力的高低。 有关这方面的内容， 请参考产品培训， 本文不涉及。 给出这两个示例的目的是说明： 数据是页面的实质， 产品通过页面将数据更直观的呈现给用户， 而呈现的方式是千千万万的。 虽然有千千万万种呈现方式， 但是页面的实质并无改变， 那就是数据。

 - 数据绑定

现在我们了解了数据是页面的实质， 页面以特定的样式呈现数据。 请看下方两个天气页面， 这是不同时间的相同天气页面。

我们一眼能认出这是同一个天气页面， 因为这两个页面非常相似， 一样的布局， 一样的样式， 呈现的都是天气数据， 唯一不同的是这不是同一天的天气数据。 

"不是同一天的的数据" 换句话说就是数据的值不同。 这种情况非常多， 比如每次打开朋友圈的内容都不一样， 百度不同的关键字结果都不一样等。 数据在不同的情况下可能有不同的值。 既然数据的值会变， 就以上图天气的例子来说， 今天做了一个页面， 明天这个页面的内容又变了， 我们该怎么办。

我们可以每天凌晨的时候， 根据最新数据做一个新页面。 每天如此， 再勤奋的人也受不了。 然后有人想了一个办法， 我们不需要重新制作页面， 只需要把页面保存下来， 每天修改数据值的部分就可以。 再改进一点， 页面只需要把变动其中的数据部分， 那么我们把需要显示数据的部分标识出来， 把页面中的数据单独分离出来， 那么生成一个页面只需要提供数据即可。 数据绑定就可以把页面显示数据的部分跟显示的是那个数据绑定在一起。

请看下方示例:

- 如何使用数据逻辑

理解完数据逻辑之后，让我们来看下我们使用数据逻辑的一般过程，其实正是数据绑定解决问题的过程，下面我们来解析下交互类需求。

对于任何交互需求，我们可以用自然语言描述为：“当AAA时，BBB元素做CCC效果”——首先的工作，就是将交互需求以此类格式描述，一旦这个描述工作完成，借助数据绑定，就可以形式化实现这个交互效果了。

只要你能将需求用自然语言描述出来，将视觉结果对应的元素确定(BBB元素)，然后确定视觉效果对应元素的哪个属性(CCC效果)，绑定到确定的元素上。自然语言的条件部分，就是限定了这个绑定变量的取值，这个逻辑，可以通过数据同步元素由服务器处理，也可以通过复合信息来计算，如果条件简单，直接在绑定变量时，使用条件表达式替代变量名。例如，一个现实的需求，当总额为0时，不显示支付按钮。这里，目标元素是支付按钮，目标属性是可显示特性，然后我们直接在支付按钮上添加一个可见性绑定；然后查看逻辑，如果是服务器计算逻辑，那么直接填写对应变量名；如果是复合信息，直接在复合信息中计算，这个例子可以用最简单形式，直接在绑定的地方写上"total()>0"即可。很简单吧？碰到需求，经常这样思考下，熟悉数据绑定之后，交互的大门就向你敞开了。

例如上面的小例子，我们的需求可以描述为在右方显示姓名输入的值以及生日，好了，这里目标元素是右方span元素，在其上做两个文本值绑定，分别绑定到name,birthday变量上。然后，考察其条件，发现name和birthday分别来自于输入框，继续把两个变量分别绑定到输入框的输入绑定上，目标就满足了。

最后，可以再次阅读下数据一节，看我们在面对什么问题的情况下，引入了数据绑定的概念的。再体会本节描述的使用方法，体会下这句总结：只需要把问题用自然语言描述清楚，首先确定目标元素，打开其绑定对话框，然后确定目标效果，以确定绑定的类型，最后根据条件部分对绑定的值做变化。改变这些值，要么继续绑定到其它元素的输出，要么使用服务器返回(数据同步元素)，要么使用复合信息。详细介绍请查看以下内容。

- AAA条件的实现方式

这时我们又想到了这句自然语言：当AAA时，BBB元素做CCC效果。让“BBB元素做CCC效果”这个是很容易实现的，但是“当AAA时”这个是很难确定的，我们以下给出五种方法：

- 数据流图

根据上面的第三种方法，把变量绑定到元素的输出变量上，再把这个元素的输入变量绑定到另一个元素的输出变量上，再把……就像多米诺骨牌一样，改变任意一个元素的输入变量值，这个变量的值都会随之改变。详情可查看产品开发的数据关系梳理，原理是一样的。

- 数据绑定与信息点

我们已经知道，一个信息系统就是处理信息的，因此，一个页面的主要职责就是呈现符合业务逻辑的信息点，并将用户交互产生的信息点按照业务逻辑更新回系统，从而产生一系列后续变化。信息结构图就是描述这一业务系统所涉及的信息点的，页面所需要呈现/交互的信息点都在信息结构图的范围内。数据绑定的一个重要职责，就是允许页面的内容由数据驱动——而这些数据通常就是信息点。在WWARE中，信息点类的数据格式为“字段名”。因此，数据逻辑除了如上文描述的，支持某种交互逻辑，其更常见的职责是将页面的信息点标识出来，并可以由服务器端来更新这些数据，从而动态化完毕页面。实际上，随着深入了解WWARE，您会意识到，如果服务器端已经支持了某个名词(表格)的相关处理，页面在产品阶段就可以支持完全部功能，而无需程序介入。