vuejs
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
A Flavor of Directives. 12<br />
build and manipulate our data since having everything right in front of you is better than looking<br />
constantly at your console.<br />
Info<br />
JSON (JavaScript Object Notation) is a lightweight data-interchange format. You can find<br />
more info on JSON here¹. The output of {{$data | json}} is binded with Vue data and<br />
will get updated on every change.<br />
1 <br />
2 <br />
3 Hello Vue<br />
4 <br />
5 <br />
6 <br />
7 You must send a message for help!<br />
8 <br />
9 <br />
10 Send word to allies for help!<br />
11 <br />
12 <br />
13 {{$data | json}}<br />
14 <br />
15 <br />
16 <br />
17 <br />
18 <br />
19 new Vue({<br />
20 el: '#app',<br />
21 data: {<br />
22 message: 'Our king is dead! Send help!'<br />
23 }<br />
24 })<br />
25 <br />
26 <br />
Carrying on, we now have a simple warning in the h1 tag that will toggle later based on some<br />
criteria. Next to it, there is the button which is going to display conditionally, it appears only if there<br />
is a message present. If the textarea is empty and therefore our data, the button’s display attribute<br />
is automatically set to ‘none’ and the button disappears.<br />
¹http://www.json.org/