Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Syntax: Marko vs Vue

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)

@Akryum

This comment has been minimized.

Copy link

@Akryum Akryum commented Sep 18, 2017

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.

@PierBover

This comment has been minimized.

Copy link

@PierBover PierBover commented Jun 18, 2018

increment() {
  this.count++;
}

Should be:

methods: {
  increment() {
    this.count++;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment