最近接手一個學校網站的修改工作，硬性要求是支持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在某些方面實現存在缺陷 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 }});新聞熱點
疑難解答
