make-page-component-reactive.md 1.74 KB
Newer Older
Gicquel's avatar
Gicquel committed
1
2
3
4
# Make page component reactive



Gicquel's avatar
Gicquel committed
5
## About reactivity 
Gicquel's avatar
Gicquel committed
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

After having created static content, we will now use this content to use reactivity. Reactivity is at the core of VueJS. 

{% hint style="info" %}
Beyond Albiziapp and VueJS, reactive programming is a research topic in itself \(that has relations with MDE although no clear consensus exists\).
{% endhint %}

In the case of Albiziapp, reactivity means :

* Data are declarative. The UI reacts automatically to data change.
  * => The UI should not change if there are no data change
* Derived data are bounded to the original data. 
  * If `a=b+c`  each time `b or c` are changed, a will change accordingly.
* Data changes occurring in a subcomponent are reflected in the parent components

Gicquel's avatar
Gicquel committed
21
## Practical example : mutating data
Gicquel's avatar
Gicquel committed
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

In the new page script, let's declare a `data()` function. This function is used in VueJS to create simple reactive data. For convenience, use the following code.

```javascript
<template>
  <v-ons-page>
    <div class="content center">{{text}}</div>
  </v-ons-page>
</template>

<script>
export default {
  data() {
    return {
      text: "interest"
    };
  }
};
</script>

<style>
.center {
  position: relative;
  top: 50%;
  left: 50%;
}
</style>

```

The `text` variable is here declared and initialized. It is now possible to refer to `text` in the UI. The`{{text}}` item in the div is a simple illustration of this use. 

The double mustache syntax evaluates the value of the **javascript expression** it contains, and return the string representation of this expression. Practically it gives a lot of power. Replace {{text}} by the following examples.

```javascript
    {{text.toUpperCase()}}
    {{text.split('').sort().join().split('')}}

```

Gicquel's avatar
Gicquel committed
62
63
64
65
66
67
## Handling events to mutate data