patrick-steele-idem · May 10, 2021 03:52 · Sep 17, 2017 · Sep 17, 2017 · Sep 17, 2017 · Sep 17, 2017
diff --git a/README.md b/README.md
@@ -74,7 +74,7 @@ __Marko:__
 __Vue:__
 
 ```html
-<div class=my-class" :class="{ active: isActive }" :style="{ backgroundColor: color }">
+<div :class="{ "my-class": true, active: isActive }" :style="{ backgroundColor: color }">
 ```
 
 ## Single file components

diff --git a/README.md b/README.md
@@ -137,4 +137,18 @@ module.exports = {
     </button>
   </div>
 </template>
-```
+```
+
+## Embedded JavaScript statements
+
+__Marko:__
+
+```marko
+$ let name = `${input.firstName} ${input.lastName}`
+
+<div>Hello ${name}</div>
+```
+
+__Vue:__
+
+(not supported)
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-# Custom tags and passing data
+# Syntax: Marko vs Vue
+
+## Custom tags and passing data
 
 __Marko:__
 
@@ -12,15 +14,15 @@ __Marko:__
 
 __Vue:__
 
-```marko
+```html
 <greeting
   :name="fullName"
   :message-count="30"
   :visible="true"
   title="Welcome"/>
 ```
 
-# Conditionals
+## Conditionals
 
 __Marko:__
 
@@ -40,13 +42,13 @@ __Marko:__
 
 __Vue:__
 
-```vue
+```html
 <div v-if="someCondition">
   Hello
 </div>
 ```
 
-# Looping
+## Looping
 
 __Marko:__
 
@@ -56,11 +58,11 @@ __Marko:__
 
 __Vue:__
 
-```marko
+```html
 <li v-for="todo in todos">
 ```
 
-# Class and style binding
+## Class and style binding
 
 __Marko:__
 
@@ -71,11 +73,11 @@ __Marko:__
 
 __Vue:__
 
-```marko
+```html
 <div class=my-class" :class="{ active: isActive }" :style="{ backgroundColor: color }">
 ```
 
-# Single file components
+## Single file components
 
 __Marko:__
 
@@ -107,7 +109,7 @@ style {
 
 __Vue:__
 
-```vue
+```html
 <script>
 module.exports = {
   data: function () {

diff --git a/README.md b/README.md
@@ -0,0 +1,138 @@
+# Custom tags and passing data
+
+__Marko:__
+
+```marko
+<greeting
+  name=fullName
+  message-count=30
+  visible
+  title="Welcome"/>
+```
+
+__Vue:__
+
+```marko
+<greeting
+  :name="fullName"
+  :message-count="30"
+  :visible="true"
+  title="Welcome"/>
+```
+
+# Conditionals
+
+__Marko:__
+
+```marko
+<div if(someCondition)>
+  Hello
+</div>
+
+// OR:
+
+<if(someCondition)>
+  <div>
+    Hello
+  </div>
+</if>
+```
+
+__Vue:__
+
+```vue
+<div v-if="someCondition">
+  Hello
+</div>
+```
+
+# Looping
+
+__Marko:__
+
+```marko
+<li for(todo in todos)>
+```
+
+__Vue:__
+
+```marko
+<li v-for="todo in todos">
+```
+
+# Class and style binding
+
+__Marko:__
+
+```marko
+<div.my-class class={ active: isActive } style={ backgroundColor: color }>
+```
+
+
+__Vue:__
+
+```marko
+<div class=my-class" :class="{ active: isActive }" :style="{ backgroundColor: color }">
+```
+
+# Single file components
+
+__Marko:__
+
+```marko
+class {
+  onCreate() {
+    this.state = { 
+      count: 0 
+    };
+  }
+  increment() {
+    this.state.count++;
+  }
+}
+
+style {
+  .count {
+    color:#09c;
+  }
+}
+
+<div>
+  <div.count>${state.count}</div>
+  <button on-click('increment')>
+    Click me!
+  </button>
+</div>
+```
+
+__Vue:__
+
+```vue
+<script>
+module.exports = {
+  data: function () {
+    return { 
+      count: 0 
+    };
+  }
+  increment() {
+    this.count++;
+  }
+}
+</script>
+
+<style>
+.count {
+  color:#09c;
+}
+</style>
+
+<template>
+  <div>
+    <div class="count">{{state.count}}</div>
+    <button v-on:click="increment">
+      Click me!
+    </button>
+  </div>
+</template>
+```
No results found