前端框架avalon替换vue示例，适应IE8

　　最近接手一个学校网站的修改工作，硬性要求是支持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中，想要实现一个对象类型需要用{}模拟

//vuenew Vue({    el: "",    currentDate: new Date()});//avalonavalon.define({    $id: "",    currentDate: {        year: 2017,        month: 2,        day: 9    }});