commit 0c9f291a3c79723d357d7b5035cb854d9d876e08
Author: Remy Noulin <loader2x@gmail.com>
Date: Mon, 27 Nov 2017 15:26:12 +0100
tutorial examples
README.md | 5 +++++
bars.html | 23 +++++++++++++++++++++++
changingData.html | 15 +++++++++++++++
conditionalRendering.html | 15 +++++++++++++++
eventListener.html | 21 +++++++++++++++++++++
first.html | 14 ++++++++++++++
loops.html | 16 ++++++++++++++++
methods.html | 23 +++++++++++++++++++++++
onInput.html | 21 +++++++++++++++++++++
showHide.html | 28 ++++++++++++++++++++++++++++
twoWayBinding.html | 31 +++++++++++++++++++++++++++++++
11 files changed, 212 insertions(+)
Diffstat:
11 files changed, 212 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+moonjs examples
+
+https://github.com/kbrsh/moon
+
+http://moonjs.ga/docs/getting-started.html
diff --git a/bars.html b/bars.html
@@ -0,0 +1,23 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<script src="https://unpkg.com/moon-bars"></script>
+<div id="app1">
+ <p>{{msg}}</p>
+
+ <bars
+ m-literal:data="[5, 7, 4, 3, 5]"
+ m-literal:fill="['#7bddd3', '#079af9']"
+ height="100"
+ width="300">
+ </bars>
+</div>
+<script>
+Moon.use(MoonBars);
+const app1 = new Moon({
+ el: "#app1",
+ data: {
+ msg: "Hello Moon!"
+ }
+});
+</script>
+</body>
diff --git a/changingData.html b/changingData.html
@@ -0,0 +1,15 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app2">
+ <p>{{msg}}</p>
+</div>
+<script>
+const app2 = new Moon({
+ el: "#app2",
+ data: {
+ msg: "Hello Moon!"
+ }
+});
+app2.set('msg', "Changed Message!");
+</script>
+</body>
diff --git a/conditionalRendering.html b/conditionalRendering.html
@@ -0,0 +1,15 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app5">
+ <p m-if="condition">The Condition is True!</p>
+</div>
+<script>
+const app5 = new Moon({
+ el: "#app5",
+ data : {
+ condition: true
+ }
+});
+</script>
+<!-- in console: app5.set('condition', false) -->
+</body>
diff --git a/eventListener.html b/eventListener.html
@@ -0,0 +1,21 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app7">
+ <p>{{count}}</p>
+ <button m-on:click="increment">Increment</button>
+</div>
+<script>
+const app7 = new Moon({
+ el: "#app7",
+ data: {
+ count: 0
+ },
+ methods: {
+ increment: function() {
+ // Increment the count by one
+ this.set('count', this.get('count') + 1);
+ }
+ }
+});
+</script>
+</body>
diff --git a/first.html b/first.html
@@ -0,0 +1,14 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app1">
+ <p>{{msg}}</p>
+</div>
+<script>
+const app1 = new Moon({
+ el: "#app1",
+ data: {
+ msg: "Hello Moon!"
+ }
+});
+</script>
+</body>
diff --git a/loops.html b/loops.html
@@ -0,0 +1,16 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app6">
+ <ul>
+ <li m-for="item in list">{{item}}</li>
+ </ul>
+</div>
+<script>
+const app6 = new Moon({
+ el: "#app6",
+ data: {
+ list: ['Item - 1', 'Item - 2', 'Item - 3', 'Item - 4']
+ }
+});
+</script>
+</body>
diff --git a/methods.html b/methods.html
@@ -0,0 +1,23 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app3">
+ <p>{{reverse(msg)}}</p>
+</div>
+<script>
+const app3 = new Moon({
+ el: "#app3",
+ data: {
+ msg: "Hello Moon!"
+ },
+ methods: {
+ changeMessage: function(msg) {
+ this.set('msg', msg);
+ },
+ reverse: function(str) {
+ return str.split("").reverse().join("");
+ }
+ }
+});
+app3.callMethod('changeMessage', ['New Message!']);
+</script>
+</body>
diff --git a/onInput.html b/onInput.html
@@ -0,0 +1,21 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app">
+ <p>{{count}} <input type='text' placeholder='type something here...' m-model="inputvar" m-on:input="keyup"></p>
+ <p>{{inputvar}}</p>
+</div>
+<script>
+const app7 = new Moon({
+ el: "#app",
+ data: {
+ count: 0,
+ inputvar: ''
+ },
+ methods: {
+ keyup: function() {
+ this.set('count', this.get('inputvar').length);
+ }
+ }
+});
+</script>
+</body>
diff --git a/showHide.html b/showHide.html
@@ -0,0 +1,28 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app">
+ <p>{{count}}</p>
+ <button m-on:click="increment">Increment</button>
+ <button m-on:click="reset">Reset</button>
+ <div m-if="count !==0">
+ Count is not 0.
+ </div>
+</div>
+<script>
+const app7 = new Moon({
+ el: "#app",
+ data: {
+ count: 0
+ },
+ methods: {
+ increment: function() {
+ // Increment the count by one
+ this.set('count', this.get('count') + 1);
+ },
+ reset: function() {
+ this.set('count', 0);
+ }
+ }
+});
+</script>
+</body>
diff --git a/twoWayBinding.html b/twoWayBinding.html
@@ -0,0 +1,31 @@
+<body>
+<script src="https://unpkg.com/moonjs"></script>
+<div id="app">
+ <p>{{count}} <input m-model="inputvar"></p>
+ <button m-on:click="increment">Increment</button>
+ <button m-on:click="reset">Reset</button>
+ <p>{{inputvar}}</p>
+ <div m-if="count !==0">
+ Count is not 0.
+ </div>
+</div>
+<script>
+const app7 = new Moon({
+ el: "#app",
+ data: {
+ count: 0,
+ inputvar: ''
+ },
+ methods: {
+ increment: function() {
+ // Increment the count by one
+ this.set('count', this.get('count') + 1);
+ },
+ reset: function() {
+ this.set('count', 0);
+ this.set('inputvar', '');
+ }
+ }
+});
+</script>
+</body>
