MoonJS

• 5kb .min
• Virtual DOM
• API súper-mega-simple

<div id='app'>
  <h1>{{msg}}</h1>
</div>

var app = new Moon({
  el: '#app',
  data: {
    msg: 'Hello Moon!'
  }
});

Manipulando Data

var app = new Moon({
  el: '#app',
  data: {
    msg: 'Hello Moon!'
  }
});

app.set('msg', "Bye Moon!");

Métodos

var app = new Moon({
  el: '#app',
  data: {
    msg: 'Hello Moon!'
  },
  methods: {
    changeMessage: function(msg) {
      this.set('msg', msg);
    }
  }
});

app.callMethod('changeMessage', ['Bye Moon!']);

Condiciones

<div id="app">
  <p m-if="{{condition}}">The Condition is True!</p>
</div>

var app = new Moon({
  el: '#app',
  data: {
    condition: true
  }
});

Loops

<div id="app">
  <ul>
    <li m-for="item in {{list}}">{{item}}</li>
  </ul>
</div>

var app = new Moon({
  el: "#app",
  data: {
    list: ['Item - 1', 'Item - 2', 'Item - 3', 'Item - 4']
  }
});

Componentes

<div id="app">
  <component></component>
</div>

Moon.component('component', {
  template: "<p>This is a Component!</p>"
});

var app = new Moon({
  el: "#app"
});

Props

<div id="app">
  <component content="{{parentMsg}}"></component>
</div>

Moon.component('component', {
  props: ['content'],
  template: "<p>Data from Parent: {{content}}</p>"
});

var app = new Moon({
  el: "#app",
  data: {
    parentMsg: "Parent Data"
  }
});

Instancias

new Moon({
  hooks: {
    init: function() {
      // called when first creating
    },
    mounted: function() {
      // called when element is mounted and the first build has been run
    },
    updated: function() {
      // called every time data is updated
    },
    destroyed: function() {
      // called when it is destroyed, the component might be removed
      // from the DOM
    }
  }
});

app.destroy();

Ejemplo: MD2HTML

Link: MD2HTML

var app = new Moon({
  el: "#app",
  data: {
    input: "# Hello Moon",
  },
  methods: {
    update: function(evt) {
      this.set('input', evt.target.value);
    }
  },
  computed: {
    html: {
      get: function() {
        return marked(this.get('input'));
      }
    }
  }
});