最近接手一个学校网站的修改工作，硬性要求是支持IE8，但是坑爹的是源代码的前端框架用了vue。由于avalon与vue模板比较相似，最后决定用avalon替换掉它。下面写一个示例以便以后查看。

下面的vue模板

<div id="app">
	<div>{{ "name: " + name }}</div>
	<div>{{ "sex: " + sex }}</div>
	<div v-for="e in arr">
		<a href="'yourweb/'+e+'.html'">{{ e }}</a>
	</div>
	<bottom text="It's bottom!"></bottom>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			name: "amu",
			sex: "man",
			arr: [a, b, c]
		}
	});
	Vue.component("bottom", {
		props: ["text"],
		template: "<div>{{text}}</div>"
	});
</script>

在avalon中如下书写

<div ms-controller="app">
	<div>{{ "name: " + @name }}</div>
	<div>{{ "sex: " + @sex }}</div>
	<div ms-for="e in @arr">
		<a ms-attr="{href: 'yourweb/'+e+'.html'}">{{ e }}</a>
	</div>
	<xmp ms-widget="{is:'ms-bottom', text:'It's bottom!'}"></xmp>
</div>
<script type="text/javascript">
	var app = avalon.define({
		$id: "app",
		name: "amu",
		sex: "man",
		arr: [a, b, c]
	});
	avalon.component("ms-bottom", {
		template: "<div>{{@text}}</div>",
		defaults: {
			text: ""
		}
	});
</script>

avalon存在的问题

替换的过程中，发现avalon在某些方面实现存在缺陷
1.数字循环

<!-- vue中 -->
<div v-for="i in 5"></div>

<!-- avalon中,采取折中的方法 -->
<div ms-for="i in @arr|limitBy(5)"></div>
<script type="text/javascript">
	var vm = avalon.define({
		$id: "",
		arr: new Array(20)
	});
</script>

2.成员类型
在vue中，允许一个成员为对象，如Date类型的对象。而avalon中，想要实现一个对象类型需要用{}模拟

//vue
new Vue({
	el: "",
	currentDate: new Date()
});

//avalon
avalon.define({
	$id: "",
	currentDate: {
		year: 2017,
		month: 2,
		day: 9
	}
});