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
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'))
- 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>
<p mf-id="myId"></p>
<!-- display none or not -->
<p mf-show="isShow"></p>
{if x === 1}
<p>1</p>
{elseif x === 2}
<p>2</p>
{else}
<p>3</p>
{/if}
<ul>
{list items as item}
<li><span>{item}</span><span>{item_index}</span></li>
{/list}
</ul>
use item_index
for list index
<button on-click="handleClick"></button>
if you want to handle event object, use $event
<button on-click="handleClick($event, ':)')"></button>
this.setState({
todos: newTodos
})
see base example
- only one root node
- {if} only support one root node too...
- Mipha will remove all white space in template...
see TodoMVC