Skip to content

Instantly share code, notes, and snippets.

@patrick-steele-idem
Last active May 10, 2021 03:52
Show Gist options
  • Save patrick-steele-idem/cd291a2c21ba7ea2a7e12a06467249e5 to your computer and use it in GitHub Desktop.
Save patrick-steele-idem/cd291a2c21ba7ea2a7e12a06467249e5 to your computer and use it in GitHub Desktop.
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
Copy link

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

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