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
  title="Welcome"/>

Note that you can drop the double quotes but it's not recommended (bad for readability):

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

Vue JSX:

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

Conditionals

Marko:

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

// OR:

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

Vue:

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

Vue JSX:

{someCondition ? <div>Hello</div> : ''}

Or:

{do {
  if (someCondition) {
    <div>Hello</div>
  }
}}

Looping

Marko:

<li for(todo in todos)>

Vue:

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

Or (closer to standard JS):

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

Vue JSX:

{todos.map(todo => <li></li>)}

Class and style binding

Marko:

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

Vue:

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

Or:

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

Or:

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

Vue JSX:

<div class={['my-class', { 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>
export default {
  data () {
    return { 
      count: 0 
    }
  },
  increment () {
    this.count++
  }
}
</script>

<style>
.count {
  color: #09c;
}
</style>

<template>
  <div>
    <div class="count">{{count}}</div>
    <button @click="increment">
      Click me!
    </button>
  </div>
</template>

Vue JSX:

<script>
export default {
  data () {
    return { 
      count: 0 
    }
  },
  increment () {
    this.count++
  },
  render (h) {
    return <div>
      <div class="count">{this.count}</div>
      <button onClick={this.increment}>
        Click me!
      </button>
    </div>
  }
}
</script>

<style>
.count {
  color: #09c;
}
</style>

Embedded JavaScript statements

Marko:

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

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

Vue:

<div>Hello {{`${input.firstName} ${input.lastName}`}}</div>

Vue JSX:

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

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

Side-note Marko doesn't seem to support scoped css at the moment:

<script>
export default {
  data () {
    return { 
      count: 0 
    }
  },
  increment () {
    this.count++
  }
}
</script>

<style scoped>
.count {
  color: #09c;
}
</style>

<template>
  <div>
    <div class="count">{{state.count}}</div>
    <button @click="increment">
      Click me!
    </button>
  </div>
</template>