avalon2
Version:
an elegant efficient express mvvm framework
44 lines (42 loc) • 1.58 kB
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='../../dist/avalon.js'></script>
<script>
avalon.component('ms-button', {
template: '<button type="button"><span><slot /></span></button>',
defaults: {
buttonText: "button"
},
soleSlot: 'buttonText'
})
var vm = avalon.define({
$id: 'widget1',
aaa: {
buttonText: "vm中的值"
},
bb: '动态内容',
ddd:function(){
this.aaa.buttonText = new Date - 0
},
click: function () {
vm.bb = '更新内容'+(new Date-0)
}
})
</script>
</head>
<body>
<h1>soleSlot的使用</h1>
<p>它会组件容器中innerHTML替换生成组件的slot元素</p>
<div ms-controller='widget1' >
<xmp is='ms-button' :click="@ddd" :attr="{title:@bb}">{{@bb}}</xmp>
<xmp is='ms-button' :attr="{title:@bb}">静态内容</xmp>
<xmp is='ms-button' :attr="{title:@bb}"></xmp><!--这里会使用默认内容 -->
<xmp :widget="[{is:'ms-button'}, @aaa]" :attr="{title:@bb}"></xmp><!--使用@aaa-->
<p><button :click="@click">click</button></p>
</div>
</body>
</html>