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)

increment() {
  this.count++;
}

Should be:

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