Syntax: Marko vs Vue

README.md

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
  message-count=30
  visible
  title="Welcome"/>

Vue:

<greeting
  :name="fullName"
  :message-count="30"
  :visible="true"
  title="Welcome"/>

Conditionals

Marko:

<div if(someCondition)>
  Hello
</div>

// OR:

<if(someCondition)>
  <div>
    Hello
  </div>
</if>

Vue:

<div v-if="someCondition">
  Hello
</div>

Looping

Marko:

<li for(todo in todos)>

Vue:

<li v-for="todo in todos">

Class and style binding

Marko:

<div.my-class class={ active: isActive } style={ backgroundColor: color }>

Vue:

<div :class="{ "my-class": true, active: isActive }" :style="{ backgroundColor: color }">

Single file components

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:

<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>

Embedded JavaScript statements

Marko:

$ let name = `${input.firstName} ${input.lastName}`

<div>Hello ${name}</div>

Vue:

(not supported)

Hi! I made some changes in this fork with some corrections for the Vue syntax. Not sure what you meant for the Embedded JS statements part though, don't hesitate to give feedback on this.
[Edit] Also added Vue JSX syntax for completeness.

increment() {
  this.count++;
}

Should be:

methods: {
  increment() {
    this.count++;
  }
}