【MVVM】- Avalon 事件绑定

最新推荐文章于 2019-06-20 17:01:44 发布

weixin_33913377

最新推荐文章于 2019-06-20 17:01:44 发布

阅读量258

点赞数

文章标签： python

原文链接：https://my.oschina.net/yangzhiwei256/blog/3016405

版权

2019独角兽企业重金招聘Python工程师标准>>>

avalon事件绑定

界面

<body ms-controller="test">
<div ms-css-width="w" 
     ms-css-height="h" 
     ms-css-background="c"
     ms-on-mouseenter="mouseenter"
     ms-on-mouseleave="mouseleave"
     >
</div>

<!-- 注意进行ms-css-width时，avalon会自动在数字后面加px,传给vm的只是字符串，进行计算时需要转换 -->
<span ms-text="eventType">{{eventType}}</span><br>
width:{{w}} height:{{h}}<br>
<input type="text" ms-duplex="w"><input type="text" ms-duplex="h">
</body>

js操作逻辑

/*avalon的事件绑定机制：Dom的oninput,onblur,onchange等事件绑定处理
 *格式：ms-on-事件名称
 *为了简化一些常用的事件使用，ms-on-click--->ms-click等
 */
vm=avalon.define({
	$id:"test",
	w:100,
	h:200,
	c:"green",
    eventType:"event-type",
    //函数默认第一个参数为时间对象$event
	mouseenter:function(e){
		vm.h=100;
		vm.eventType=e+"-->"+e.type;
		vm.c="red";
	},
	mouseleave:function(e){
		vm.h=200,
		vm.eventType=e+"-->"+e.type;
		vm.c="blue";
	}
});

效果：