Mipha

a simple and simple mvvm library

Mipha (ミファー Mifā) is a character in The Legend of Zelda: Breath of the Wild. She is the Princess of the Zora and a major character. Mipha is also the Zora Champion, one of Link's allies, and wears the same blue cloth as Daruk, Urbosa and Revali. This blue cloth is similar to the blue shirts worn by Link and Zelda. Zelda Wiki

Example

let mipha = new Mipha({
  template: `<div id="mipha">
      <h1>{title}</h1>
      {if zelda}
      <p>{hello}</p>
      {/if}
    </div>`,

  state: {
    title: 'Mipha',
    zelda: true,
    hello: 'a simple and simple mvvm library'
  },

  created: function() {
    console.log('created!')
  },

  mounted: function() {
    console.log('mounted!')
  }
})

mipha.$mount(document.getElementById('app'))

How to USE

Template Syntax

• Text

<p>{ message }</p>

• Html

<p mf-html="message"></p>

• Using JavaScript Expressions

<p>{ x + 1 }</p>
<p>{ ok ? 'YES' : 'NO' }</p>
<p>{ message.split('').reverse().join('') }</p>

props bindings

<p mf-id="myId"></p>

<!-- display none or not -->
<p mf-show="isShow"></p>

Conditional Rendering

{if x === 1}
<p>1</p>
{elseif x === 2}
<p>2</p>
{else}
<p>3</p>
{/if}

List Rendering

<ul>
  {list items as item}
  <li><span>{item}</span><span>{item_index}</span></li>
  {/list}
</ul>

use item_index for list index

Event Handling

<button on-click="handleClick"></button>

if you want to handle event object, use $event

<button on-click="handleClick($event, ':)')"></button>

Data Bind

this.setState({
  todos: newTodos
})

Component support

see base example

restrict

• only one root node
• {if} only support one root node too...
• Mipha will remove all white space in template...

TodoMVC Example

see TodoMVC

License

MIT